'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var util = require('../utils/util');
var dom = require('../utils/dom');
var core = require('@popperjs/core');
var PopupManager = require('../utils/popup-manager');
var debounce = require('lodash/debounce');
var locale = require('../locale');
var directives = require('../directives');
var scrollbarWidth = require('../utils/scrollbar-width');
var isServer = require('../utils/isServer');
var ElCheckbox = require('../el-checkbox');
var ElPopper = require('../el-popper');
var ElCheckboxGroup = require('../el-checkbox-group');
var ElScrollbar = require('../el-scrollbar');
var resizeEvent = require('../utils/resize-event');
var throttle = require('lodash/throttle');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var PopupManager__default = /*#__PURE__*/_interopDefaultLegacy(PopupManager);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var scrollbarWidth__default = /*#__PURE__*/_interopDefaultLegacy(scrollbarWidth);
var isServer__default = /*#__PURE__*/_interopDefaultLegacy(isServer);
var ElCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(ElCheckbox);
var ElPopper__default = /*#__PURE__*/_interopDefaultLegacy(ElPopper);
var ElCheckboxGroup__default = /*#__PURE__*/_interopDefaultLegacy(ElCheckboxGroup);
var ElScrollbar__default = /*#__PURE__*/_interopDefaultLegacy(ElScrollbar);
var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);

const getCell = function (event) {
    let cell = event.target;
    while (cell && cell.tagName.toUpperCase() !== 'HTML') {
        if (cell.tagName.toUpperCase() === 'TD') {
            return cell;
        }
        cell = cell.parentNode;
    }
    return null;
};
const isObject = function (obj) {
    return obj !== null && typeof obj === 'object';
};
const orderBy = function (array, sortKey, reverse, sortMethod, sortBy) {
    if (!sortKey &&
        !sortMethod &&
        (!sortBy || (Array.isArray(sortBy) && !sortBy.length))) {
        return array;
    }
    if (typeof reverse === 'string') {
        reverse = reverse === 'descending' ? -1 : 1;
    }
    else {
        reverse = reverse && reverse < 0 ? -1 : 1;
    }
    const getKey = sortMethod
        ? null
        : function (value, index) {
            if (sortBy) {
                if (!Array.isArray(sortBy)) {
                    sortBy = [sortBy];
                }
                return sortBy.map(function (by) {
                    if (typeof by === 'string') {
                        return util.getValueByPath(value, by);
                    }
                    else {
                        return by(value, index, array);
                    }
                });
            }
            if (sortKey !== '$key') {
                if (isObject(value) && '$value' in value)
                    value = value.$value;
            }
            return [isObject(value) ? util.getValueByPath(value, sortKey) : value];
        };
    const compare = function (a, b) {
        if (sortMethod) {
            return sortMethod(a.value, b.value);
        }
        for (let i = 0, len = a.key.length; i < len; i++) {
            if (a.key[i] < b.key[i]) {
                return -1;
            }
            if (a.key[i] > b.key[i]) {
                return 1;
            }
        }
        return 0;
    };
    return array
        .map(function (value, index) {
        return {
            value: value,
            index: index,
            key: getKey ? getKey(value, index) : null,
        };
    })
        .sort(function (a, b) {
        let order = compare(a, b);
        if (!order) {
            order = a.index - b.index;
        }
        return order * reverse;
    })
        .map(item => item.value);
};
const getColumnById = function (table, columnId) {
    let column = null;
    table.columns.forEach(function (item) {
        if (item.id === columnId) {
            column = item;
        }
    });
    return column;
};
const getColumnByKey = function (table, columnKey) {
    let column = null;
    for (let i = 0; i < table.columns.length; i++) {
        const item = table.columns[i];
        if (item.columnKey === columnKey) {
            column = item;
            break;
        }
    }
    return column;
};
const getColumnByCell = function (table, cell) {
    const matches = (cell.className || '').match(/el-table_[^\s]+/gm);
    if (matches) {
        return getColumnById(table, matches[0]);
    }
    return null;
};
const getRowIdentity = (row, rowKey) => {
    if (!row)
        throw new Error('row is required when get row identity');
    if (typeof rowKey === 'string') {
        if (rowKey.indexOf('.') < 0) {
            return row[rowKey];
        }
        const key = rowKey.split('.');
        let current = row;
        for (let i = 0; i < key.length; i++) {
            current = current[key[i]];
        }
        return current;
    }
    else if (typeof rowKey === 'function') {
        return rowKey.call(null, row);
    }
};
const getKeysMap = function (array, rowKey) {
    const arrayMap = {};
    (array || []).forEach((row, index) => {
        arrayMap[getRowIdentity(row, rowKey)] = { row, index };
    });
    return arrayMap;
};
function parseHeight(height) {
    if (typeof height === 'number') {
        return height;
    }
    if (typeof height === 'string') {
        if (/^\d+(?:px)?$/.test(height)) {
            return parseInt(height, 10);
        }
        else {
            return height;
        }
    }
    return null;
}
function toggleRowStatus(statusArr, row, newVal) {
    let changed = false;
    const index = statusArr.indexOf(row);
    const included = index !== -1;
    const addRow = () => {
        statusArr.push(row);
        changed = true;
    };
    const removeRow = () => {
        statusArr.splice(index, 1);
        changed = true;
    };
    if (typeof newVal === 'boolean') {
        if (newVal && !included) {
            addRow();
        }
        else if (!newVal && included) {
            removeRow();
        }
    }
    else {
        if (included) {
            removeRow();
        }
        else {
            addRow();
        }
    }
    return changed;
}
function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {
    const isNil = array => !(Array.isArray(array) && array.length);
    function _walker(parent, children, level) {
        cb(parent, children, level);
        children.forEach(item => {
            if (item[lazyKey]) {
                cb(item, null, level + 1);
                return;
            }
            const children = item[childrenKey];
            if (!isNil(children)) {
                _walker(item, children, level + 1);
            }
        });
    }
    root.forEach(item => {
        if (item[lazyKey]) {
            cb(item, null, 0);
            return;
        }
        const children = item[childrenKey];
        if (!isNil(children)) {
            _walker(item, children, 0);
        }
    });
}
let removePopper;
function createTablePopper(trigger, popperContent, popperOptions, tooltipEffect) {
    function renderContent() {
        const isLight = tooltipEffect === 'light';
        const content = document.createElement('div');
        content.className = `el-popper ${isLight ? 'is-light' : 'is-dark'}`;
        content.innerHTML = popperContent;
        content.style.zIndex = String(PopupManager__default['default'].nextZIndex());
        document.body.appendChild(content);
        return content;
    }
    function renderArrow() {
        const arrow = document.createElement('div');
        arrow.className = 'el-popper__arrow';
        arrow.style.bottom = '-4px';
        return arrow;
    }
    function showPopper() {
        popperInstance && popperInstance.update();
    }
    removePopper = function removePopper() {
        try {
            popperInstance && popperInstance.destroy();
            content && document.body.removeChild(content);
            dom.off(trigger, 'mouseenter', showPopper);
        }
        catch (_a) { }
    };
    dom.off(trigger, 'mouseleave', removePopper);
    let popperInstance = null;
    const content = renderContent();
    const arrow = renderArrow();
    content.appendChild(arrow);
    popperInstance = core.createPopper(trigger, content, Object.assign({ modifiers: [
            {
                name: 'offset',
                options: {
                    offset: [0, 8],
                },
            },
            {
                name: 'arrow',
                options: {
                    element: arrow,
                    padding: 10,
                },
            },
        ] }, popperOptions));
    dom.on(trigger, 'mouseenter', showPopper);
    dom.on(trigger, 'mouseleave', removePopper);
}

function useExpand(watcherData) {
    const instance = vue.getCurrentInstance();
    const defaultExpandAll = vue.ref(false);
    const expandRows = vue.ref([]);
    const updateExpandRows = () => {
        const data = watcherData.data.value || [];
        const rowKey = watcherData.rowKey.value;
        if (defaultExpandAll.value) {
            expandRows.value = data.slice();
        }
        else if (rowKey) {
            const expandRowsMap = getKeysMap(expandRows.value, rowKey);
            expandRows.value = data.reduce((prev, row) => {
                const rowId = getRowIdentity(row, rowKey);
                const rowInfo = expandRowsMap[rowId];
                if (rowInfo) {
                    prev.push(row);
                }
                return prev;
            }, []);
        }
        else {
            expandRows.value = [];
        }
    };
    const toggleRowExpansion = (row, expanded) => {
        const changed = toggleRowStatus(expandRows.value, row, expanded);
        if (changed) {
            instance.emit('expand-change', row, expandRows.value.slice());
            instance.store.scheduleLayout();
        }
    };
    const setExpandRowKeys = (rowKeys) => {
        instance.store.assertRowKey();
        const data = watcherData.data.value || [];
        const rowKey = watcherData.rowKey.value;
        const keysMap = getKeysMap(data, rowKey);
        expandRows.value = rowKeys.reduce((prev, cur) => {
            const info = keysMap[cur];
            if (info) {
                prev.push(info.row);
            }
            return prev;
        }, []);
    };
    const isRowExpanded = (row) => {
        const rowKey = watcherData.rowKey.value;
        if (rowKey) {
            const expandMap = getKeysMap(expandRows.value, rowKey);
            return !!expandMap[getRowIdentity(row, rowKey)];
        }
        return expandRows.value.indexOf(row) !== -1;
    };
    return {
        updateExpandRows,
        toggleRowExpansion,
        setExpandRowKeys,
        isRowExpanded,
        states: {
            expandRows,
            defaultExpandAll,
        },
    };
}

function useCurrent(watcherData) {
    const instance = vue.getCurrentInstance();
    const _currentRowKey = vue.ref(null);
    const currentRow = vue.ref(null);
    const setCurrentRowKey = (key) => {
        instance.store.assertRowKey();
        _currentRowKey.value = key;
        setCurrentRowByKey(key);
    };
    const restoreCurrentRowKey = () => {
        _currentRowKey.value = null;
    };
    const setCurrentRowByKey = (key) => {
        const { data = [], rowKey } = watcherData;
        let _currentRow = null;
        if (rowKey.value) {
            _currentRow = util.arrayFind(vue.unref(data), item => getRowIdentity(item, rowKey.value) === key);
        }
        currentRow.value = _currentRow;
    };
    const updateCurrentRow = (_currentRow) => {
        const oldCurrentRow = currentRow.value;
        if (_currentRow && _currentRow !== oldCurrentRow) {
            currentRow.value = _currentRow;
            instance.emit('current-change', currentRow.value, oldCurrentRow);
            return;
        }
        if (!_currentRow && oldCurrentRow) {
            currentRow.value = null;
            instance.emit('current-change', null, oldCurrentRow);
        }
    };
    const updateCurrentRowData = () => {
        const rowKey = watcherData.rowKey.value;
        const data = watcherData.data.value || [];
        const oldCurrentRow = currentRow.value;
        if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
            if (rowKey) {
                const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
                setCurrentRowByKey(currentRowKey);
            }
            else {
                currentRow.value = null;
            }
            if (currentRow.value === null) {
                instance.emit('current-change', null, oldCurrentRow);
            }
        }
        else if (_currentRowKey.value) {
            setCurrentRowByKey(_currentRowKey.value);
            restoreCurrentRowKey();
        }
    };
    return {
        setCurrentRowKey,
        restoreCurrentRowKey,
        setCurrentRowByKey,
        updateCurrentRow,
        updateCurrentRowData,
        states: {
            _currentRowKey,
            currentRow,
        },
    };
}

function useTree(watcherData) {
    const expandRowKeys = vue.ref([]);
    const treeData = vue.ref({});
    const indent = vue.ref(16);
    const lazy = vue.ref(false);
    const lazyTreeNodeMap = vue.ref({});
    const lazyColumnIdentifier = vue.ref('hasChildren');
    const childrenColumnName = vue.ref('children');
    const instance = vue.getCurrentInstance();
    const normalizedData = vue.computed(() => {
        if (!watcherData.rowKey.value)
            return {};
        const data = watcherData.data.value || [];
        return normalize(data);
    });
    const normalizedLazyNode = vue.computed(() => {
        const rowKey = watcherData.rowKey.value;
        const keys = Object.keys(lazyTreeNodeMap.value);
        const res = {};
        if (!keys.length)
            return res;
        keys.forEach(key => {
            if (lazyTreeNodeMap.value[key].length) {
                const item = { children: [] };
                lazyTreeNodeMap.value[key].forEach(row => {
                    const currentRowKey = getRowIdentity(row, rowKey);
                    item.children.push(currentRowKey);
                    if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) {
                        res[currentRowKey] = { children: [] };
                    }
                });
                res[key] = item;
            }
        });
        return res;
    });
    const normalize = data => {
        const rowKey = watcherData.rowKey.value;
        const res = {};
        walkTreeNode(data, (parent, children, level) => {
            const parentId = getRowIdentity(parent, rowKey);
            if (Array.isArray(children)) {
                res[parentId] = {
                    children: children.map(row => getRowIdentity(row, rowKey)),
                    level,
                };
            }
            else if (lazy.value) {
                res[parentId] = {
                    children: [],
                    lazy: true,
                    level,
                };
            }
        }, childrenColumnName.value, lazyColumnIdentifier.value);
        return res;
    };
    const updateTreeData = () => {
        var _a, _b;
        const nested = normalizedData.value;
        const normalizedLazyNode_ = normalizedLazyNode.value;
        const keys = Object.keys(nested);
        const newTreeData = {};
        if (keys.length) {
            const oldTreeData = vue.unref(treeData);
            const defaultExpandAll = (_a = instance.store) === null || _a === void 0 ? void 0 : _a.states.defaultExpandAll.value;
            const rootLazyRowKeys = [];
            const getExpanded = (oldValue, key) => {
                const included = defaultExpandAll ||
                    (expandRowKeys.value && expandRowKeys.value.indexOf(key) !== -1);
                return !!((oldValue && oldValue.expanded) || included);
            };
            keys.forEach(key => {
                const oldValue = oldTreeData[key];
                const newValue = Object.assign({}, nested[key]);
                newValue.expanded = getExpanded(oldValue, key);
                if (newValue.lazy) {
                    const { loaded = false, loading = false } = oldValue || {};
                    newValue.loaded = !!loaded;
                    newValue.loading = !!loading;
                    rootLazyRowKeys.push(key);
                }
                newTreeData[key] = newValue;
            });
            const lazyKeys = Object.keys(normalizedLazyNode_);
            if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) {
                lazyKeys.forEach(key => {
                    const oldValue = oldTreeData[key];
                    const lazyNodeChildren = normalizedLazyNode_[key].children;
                    if (rootLazyRowKeys.indexOf(key) !== -1) {
                        if (newTreeData[key].children.length !== 0) {
                            throw new Error('[ElTable]children must be an empty array.');
                        }
                        newTreeData[key].children = lazyNodeChildren;
                    }
                    else {
                        const { loaded = false, loading = false } = oldValue || {};
                        newTreeData[key] = {
                            lazy: true,
                            loaded: !!loaded,
                            loading: !!loading,
                            expanded: getExpanded(oldValue, key),
                            children: lazyNodeChildren,
                            level: '',
                        };
                    }
                });
            }
        }
        treeData.value = newTreeData;
        (_b = instance.store) === null || _b === void 0 ? void 0 : _b.updateTableScrollY();
    };
    vue.watch(() => normalizedData.value, updateTreeData);
    vue.watch(() => normalizedLazyNode.value, updateTreeData);
    const updateTreeExpandKeys = value => {
        expandRowKeys.value = value;
        updateTreeData();
    };
    const toggleTreeExpansion = (row, expanded) => {
        instance.store.assertRowKey();
        const rowKey = watcherData.rowKey.value;
        const id = getRowIdentity(row, rowKey);
        const data = id && treeData.value[id];
        if (id && data && 'expanded' in data) {
            const oldExpanded = data.expanded;
            expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
            treeData.value[id].expanded = expanded;
            if (oldExpanded !== expanded) {
                instance.emit('expand-change', row, expanded);
            }
            instance.store.updateTableScrollY();
        }
    };
    const loadOrToggle = row => {
        instance.store.assertRowKey();
        const rowKey = watcherData.rowKey.value;
        const id = getRowIdentity(row, rowKey);
        const data = treeData.value[id];
        if (lazy.value && data && 'loaded' in data && !data.loaded) {
            loadData(row, id, data);
        }
        else {
            toggleTreeExpansion(row, undefined);
        }
    };
    const loadData = (row, key, treeNode) => {
        const { load } = instance.props;
        if (load && !treeData.value[key].loaded) {
            treeData.value[key].loading = true;
            load(row, treeNode, data => {
                if (!Array.isArray(data)) {
                    throw new Error('[ElTable] data must be an array');
                }
                treeData.value[key].loading = false;
                treeData.value[key].loaded = true;
                treeData.value[key].expanded = true;
                if (data.length) {
                    lazyTreeNodeMap.value[key] = data;
                }
                instance.emit('expand-change', row, true);
            });
        }
    };
    return {
        loadData,
        loadOrToggle,
        toggleTreeExpansion,
        updateTreeExpandKeys,
        updateTreeData,
        normalize,
        states: {
            expandRowKeys,
            treeData,
            indent,
            lazy,
            lazyTreeNodeMap,
            lazyColumnIdentifier,
            childrenColumnName,
        },
    };
}

const sortData = (data, states) => {
    const sortingColumn = states.sortingColumn;
    if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
        return data;
    }
    return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
};
const doFlattenColumns = columns => {
    const result = [];
    columns.forEach(column => {
        if (column.children) {
            result.push.apply(result, doFlattenColumns(column.children));
        }
        else {
            result.push(column);
        }
    });
    return result;
};
function useWatcher() {
    const instance = vue.getCurrentInstance();
    const rowKey = vue.ref(null);
    const data = vue.ref([]);
    const _data = vue.ref([]);
    const isComplex = vue.ref(false);
    const _columns = vue.ref([]);
    const originColumns = vue.ref([]);
    const columns = vue.ref([]);
    const fixedColumns = vue.ref([]);
    const rightFixedColumns = vue.ref([]);
    const leafColumns = vue.ref([]);
    const fixedLeafColumns = vue.ref([]);
    const rightFixedLeafColumns = vue.ref([]);
    const leafColumnsLength = vue.ref(0);
    const fixedLeafColumnsLength = vue.ref(0);
    const rightFixedLeafColumnsLength = vue.ref(0);
    const isAllSelected = vue.ref(false);
    const selection = vue.ref([]);
    const reserveSelection = vue.ref(false);
    const selectOnIndeterminate = vue.ref(false);
    const selectable = vue.ref(null);
    const filters = vue.ref({});
    const filteredData = vue.ref(null);
    const sortingColumn = vue.ref(null);
    const sortProp = vue.ref(null);
    const sortOrder = vue.ref(null);
    const hoverRow = vue.ref(null);
    vue.watch(data, () => instance.state && scheduleLayout(false), {
        deep: true,
    });
    const assertRowKey = () => {
        if (!rowKey.value)
            throw new Error('[ElTable] prop row-key is required');
    };
    const updateColumns = () => {
        fixedColumns.value = _columns.value.filter(column => column.fixed === true || column.fixed === 'left');
        rightFixedColumns.value = _columns.value.filter(column => column.fixed === 'right');
        if (fixedColumns.value.length > 0 &&
            _columns.value[0] &&
            _columns.value[0].type === 'selection' &&
            !_columns.value[0].fixed) {
            _columns.value[0].fixed = true;
            fixedColumns.value.unshift(_columns.value[0]);
        }
        const notFixedColumns = _columns.value.filter(column => !column.fixed);
        originColumns.value = []
            .concat(fixedColumns.value)
            .concat(notFixedColumns)
            .concat(rightFixedColumns.value);
        const leafColumns = doFlattenColumns(notFixedColumns);
        const fixedLeafColumns = doFlattenColumns(fixedColumns.value);
        const rightFixedLeafColumns = doFlattenColumns(rightFixedColumns.value);
        leafColumnsLength.value = leafColumns.length;
        fixedLeafColumnsLength.value = fixedLeafColumns.length;
        rightFixedLeafColumnsLength.value = rightFixedLeafColumns.length;
        columns.value = []
            .concat(fixedLeafColumns)
            .concat(leafColumns)
            .concat(rightFixedLeafColumns);
        isComplex.value =
            fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
    };
    const scheduleLayout = (needUpdateColumns, immediate = false) => {
        if (needUpdateColumns) {
            updateColumns();
        }
        if (immediate) {
            instance.state.doLayout();
        }
        else {
            instance.state.debouncedUpdateLayout();
        }
    };
    const isSelected = row => {
        return selection.value.indexOf(row) > -1;
    };
    const clearSelection = () => {
        isAllSelected.value = false;
        const oldSelection = selection.value;
        if (oldSelection.length) {
            selection.value = [];
            instance.emit('selection-change', []);
        }
    };
    const cleanSelection = () => {
        let deleted;
        if (rowKey.value) {
            deleted = [];
            const selectedMap = getKeysMap(selection.value, rowKey.value);
            const dataMap = getKeysMap(data.value, rowKey.value);
            for (const key in selectedMap) {
                if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
                    deleted.push(selectedMap[key].row);
                }
            }
        }
        else {
            deleted = selection.value.filter(item => data.value.indexOf(item) === -1);
        }
        if (deleted.length) {
            const newSelection = selection.value.filter(item => deleted.indexOf(item) === -1);
            selection.value = newSelection;
            instance.emit('selection-change', newSelection.slice());
        }
    };
    const toggleRowSelection = (row, selected, emitChange = true) => {
        const changed = toggleRowStatus(selection.value, row, selected);
        if (changed) {
            const newSelection = (selection.value || []).slice();
            if (emitChange) {
                instance.emit('select', newSelection, row);
            }
            instance.emit('selection-change', newSelection);
        }
    };
    const _toggleAllSelection = () => {
        const value = selectOnIndeterminate.value
            ? !isAllSelected.value
            : !(isAllSelected.value || selection.value.length);
        isAllSelected.value = value;
        let selectionChanged = false;
        data.value.forEach((row, index) => {
            if (selectable.value) {
                if (selectable.value.call(null, row, index) &&
                    toggleRowStatus(selection.value, row, value)) {
                    selectionChanged = true;
                }
            }
            else {
                if (toggleRowStatus(selection.value, row, value)) {
                    selectionChanged = true;
                }
            }
        });
        if (selectionChanged) {
            instance.emit('selection-change', selection.value ? selection.value.slice() : []);
        }
        instance.emit('select-all', selection.value);
    };
    const updateSelectionByRowKey = () => {
        const selectedMap = getKeysMap(selection.value, rowKey.value);
        data.value.forEach(row => {
            const rowId = getRowIdentity(row, rowKey.value);
            const rowInfo = selectedMap[rowId];
            if (rowInfo) {
                selection.value[rowInfo.index] = row;
            }
        });
    };
    const updateAllSelected = () => {
        var _a;
        if (((_a = data.value) === null || _a === void 0 ? void 0 : _a.length) === 0) {
            isAllSelected.value = false;
            return;
        }
        let selectedMap;
        if (rowKey.value) {
            selectedMap = getKeysMap(selection.value, rowKey.value);
        }
        const isSelected = function (row) {
            if (selectedMap) {
                return !!selectedMap[getRowIdentity(row, rowKey.value)];
            }
            else {
                return selection.value.indexOf(row) !== -1;
            }
        };
        let isAllSelected_ = true;
        let selectedCount = 0;
        for (let i = 0, j = (data.value || []).length; i < j; i++) {
            const item = data.value[i];
            const isRowSelectable = selectable.value && selectable.value.call(null, item, i);
            if (!isSelected(item)) {
                if (!selectable.value || isRowSelectable) {
                    isAllSelected_ = false;
                    break;
                }
            }
            else {
                selectedCount++;
            }
        }
        if (selectedCount === 0)
            isAllSelected_ = false;
        isAllSelected.value = isAllSelected_;
    };
    const updateFilters = (columns, values) => {
        if (!Array.isArray(columns)) {
            columns = [columns];
        }
        const filters_ = {};
        columns.forEach(col => {
            filters.value[col.id] = values;
            filters_[col.columnKey || col.id] = values;
        });
        return filters_;
    };
    const updateSort = (column, prop, order) => {
        if (sortingColumn.value && sortingColumn.value !== column) {
            sortingColumn.value.order = null;
        }
        sortingColumn.value = column;
        sortProp.value = prop;
        sortOrder.value = order;
    };
    const execFilter = () => {
        let sourceData = vue.unref(_data);
        Object.keys(filters.value).forEach(columnId => {
            const values = filters.value[columnId];
            if (!values || values.length === 0)
                return;
            const column = getColumnById({
                columns: columns.value,
            }, columnId);
            if (column && column.filterMethod) {
                sourceData = sourceData.filter(row => {
                    return values.some(value => column.filterMethod.call(null, value, row, column));
                });
            }
        });
        filteredData.value = sourceData;
    };
    const execSort = () => {
        data.value = sortData(filteredData.value, {
            sortingColumn: sortingColumn.value,
            sortProp: sortProp.value,
            sortOrder: sortOrder.value,
        });
    };
    const execQuery = ignore => {
        if (!(ignore && ignore.filter)) {
            execFilter();
        }
        execSort();
    };
    const clearFilter = columnKeys => {
        const { tableHeader, fixedTableHeader, rightFixedTableHeader, } = instance.refs;
        let panels = {};
        if (tableHeader)
            panels = Object.assign(panels, tableHeader.filterPanels);
        if (fixedTableHeader)
            panels = Object.assign(panels, fixedTableHeader.filterPanels);
        if (rightFixedTableHeader)
            panels = Object.assign(panels, rightFixedTableHeader.filterPanels);
        const keys = Object.keys(panels);
        if (!keys.length)
            return;
        if (typeof columnKeys === 'string') {
            columnKeys = [columnKeys];
        }
        if (Array.isArray(columnKeys)) {
            const columns_ = columnKeys.map(key => getColumnByKey({
                columns: columns.value,
            }, key));
            keys.forEach(key => {
                const column = columns_.find(col => col.id === key);
                if (column) {
                    column.filteredValue = [];
                }
            });
            instance.store.commit('filterChange', {
                column: columns_,
                values: [],
                silent: true,
                multi: true,
            });
        }
        else {
            keys.forEach(key => {
                const column = columns.value.find(col => col.id === key);
                if (column) {
                    column.filteredValue = [];
                }
            });
            filters.value = {};
            instance.store.commit('filterChange', {
                column: {},
                values: [],
                silent: true,
            });
        }
    };
    const clearSort = () => {
        if (!sortingColumn.value)
            return;
        updateSort(null, null, null);
        instance.store.commit('changeSortCondition', {
            silent: true,
        });
    };
    const { setExpandRowKeys, toggleRowExpansion, updateExpandRows, states: expandStates, isRowExpanded, } = useExpand({
        data,
        rowKey,
    });
    const { updateTreeExpandKeys, toggleTreeExpansion, loadOrToggle, states: treeStates, } = useTree({
        data,
        rowKey,
    });
    const { updateCurrentRowData, updateCurrentRow, setCurrentRowKey, states: currentData, } = useCurrent({
        data,
        rowKey,
    });
    const setExpandRowKeysAdapter = val => {
        setExpandRowKeys(val);
        updateTreeExpandKeys(val);
    };
    const toggleRowExpansionAdapter = (row, expanded) => {
        const hasExpandColumn = columns.value.some(({ type }) => type === 'expand');
        if (hasExpandColumn) {
            toggleRowExpansion(row, expanded);
        }
        else {
            toggleTreeExpansion(row, expanded);
        }
    };
    return {
        assertRowKey,
        updateColumns,
        scheduleLayout,
        isSelected,
        clearSelection,
        cleanSelection,
        toggleRowSelection,
        _toggleAllSelection,
        updateSelectionByRowKey,
        updateAllSelected,
        updateFilters,
        updateCurrentRow,
        updateSort,
        execFilter,
        execSort,
        execQuery,
        clearFilter,
        clearSort,
        toggleRowExpansion,
        setExpandRowKeysAdapter,
        setCurrentRowKey,
        toggleRowExpansionAdapter,
        isRowExpanded,
        updateExpandRows,
        updateCurrentRowData,
        loadOrToggle,
        states: Object.assign(Object.assign(Object.assign({ rowKey,
            data,
            _data,
            isComplex,
            _columns,
            originColumns,
            columns,
            fixedColumns,
            rightFixedColumns,
            leafColumns,
            fixedLeafColumns,
            rightFixedLeafColumns,
            leafColumnsLength,
            fixedLeafColumnsLength,
            rightFixedLeafColumnsLength,
            isAllSelected,
            selection,
            reserveSelection,
            selectOnIndeterminate,
            selectable,
            filters,
            filteredData,
            sortingColumn,
            sortProp,
            sortOrder,
            hoverRow }, expandStates), treeStates), currentData),
    };
}

function replaceColumn(array, column) {
    return array.map(item => {
        var _a;
        if (item.id === column.id) {
            return column;
        }
        else if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
            item.children = replaceColumn(item.children, column);
        }
        return item;
    });
}
function sortColumn(array) {
    array.forEach(item => {
        var _a, _b;
        item.no = (_a = item.getColumnIndex) === null || _a === void 0 ? void 0 : _a.call(item);
        if ((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) {
            sortColumn(item.children);
        }
    });
    array.sort((cur, pre) => cur.no - pre.no);
}
function useStore() {
    const instance = vue.getCurrentInstance();
    const mutations = {
        setData(states, data) {
            const dataInstanceChanged = vue.unref(states.data) !== data;
            states.data.value = data;
            states._data.value = data;
            instance.store.execQuery();
            instance.store.updateCurrentRowData();
            instance.store.updateExpandRows();
            if (vue.unref(states.reserveSelection)) {
                instance.store.assertRowKey();
                instance.store.updateSelectionByRowKey();
            }
            else {
                if (dataInstanceChanged) {
                    instance.store.clearSelection();
                }
                else {
                    instance.store.cleanSelection();
                }
            }
            instance.store.updateAllSelected();
            if (instance.$ready) {
                instance.store.scheduleLayout();
            }
        },
        insertColumn(states, column, parent) {
            const array = vue.unref(states._columns);
            let newColumns = [];
            if (!parent) {
                array.push(column);
                newColumns = array;
            }
            else {
                if (parent && !parent.children) {
                    parent.children = [];
                }
                parent.children.push(column);
                newColumns = replaceColumn(array, parent);
            }
            sortColumn(newColumns);
            states._columns.value = newColumns;
            if (column.type === 'selection') {
                states.selectable.value = column.selectable;
                states.reserveSelection.value = column.reserveSelection;
            }
            if (instance.$ready) {
                instance.store.updateColumns();
                instance.store.scheduleLayout();
            }
        },
        removeColumn(states, column, parent) {
            const array = vue.unref(states._columns) || [];
            if (parent) {
                parent.children.splice(parent.children.findIndex(item => item.id === column.id), 1);
                if (parent.children.length === 0) {
                    delete parent.children;
                }
                states._columns.value = replaceColumn(array, parent);
            }
            else {
                const index = array.indexOf(column);
                if (index > -1) {
                    array.splice(index, 1);
                    states._columns.value = array;
                }
            }
            if (instance.$ready) {
                instance.store.updateColumns();
                instance.store.scheduleLayout();
            }
        },
        sort(states, options) {
            const { prop, order, init } = options;
            if (prop) {
                const column = util.arrayFind(vue.unref(states.columns), column => column.property === prop);
                if (column) {
                    column.order = order;
                    instance.store.updateSort(column, prop, order);
                    instance.store.commit('changeSortCondition', { init });
                }
            }
        },
        changeSortCondition(states, options) {
            const { sortingColumn: column, sortProp: prop, sortOrder: order } = states;
            if (vue.unref(order) === null) {
                states.sortingColumn.value = null;
                states.sortProp.value = null;
            }
            const ingore = { filter: true };
            instance.store.execQuery(ingore);
            if (!options || !(options.silent || options.init)) {
                instance.emit('sort-change', {
                    column: vue.unref(column),
                    prop: vue.unref(prop),
                    order: vue.unref(order),
                });
            }
            instance.store.updateTableScrollY();
        },
        filterChange(states, options) {
            const { column, values, silent } = options;
            const newFilters = instance.store.updateFilters(column, values);
            instance.store.execQuery();
            if (!silent) {
                instance.emit('filter-change', newFilters);
            }
            instance.store.updateTableScrollY();
        },
        toggleAllSelection() {
            instance.store.toggleAllSelection();
        },
        rowSelectedChanged(states, row) {
            instance.store.toggleRowSelection(row);
            instance.store.updateAllSelected();
        },
        setHoverRow(states, row) {
            states.hoverRow.value = row;
        },
        setCurrentRow(states, row) {
            instance.store.updateCurrentRow(row);
        },
    };
    const commit = function (name, ...args) {
        const mutations = instance.store.mutations;
        if (mutations[name]) {
            mutations[name].apply(instance, [instance.store.states].concat(args));
        }
        else {
            throw new Error(`Action not found: ${name}`);
        }
    };
    const updateTableScrollY = function () {
        vue.nextTick(() => instance.layout.updateScrollY.apply(instance.layout));
    };
    const watcher = useWatcher();
    return Object.assign(Object.assign({}, watcher), { mutations,
        commit,
        updateTableScrollY });
}

function createStore(table, initialState = {}) {
    if (!table) {
        throw new Error('Table is required.');
    }
    const store = useStore();
    store.toggleAllSelection = debounce__default['default'](store._toggleAllSelection, 10);
    Object.keys(initialState).forEach(key => {
        store.states[key].value = initialState[key];
    });
    return store;
}

class TableLayout {
    constructor(options) {
        this.observers = [];
        this.table = null;
        this.store = null;
        this.columns = [];
        this.fit = true;
        this.showHeader = true;
        this.height = vue.ref(null);
        this.scrollX = vue.ref(false);
        this.scrollY = vue.ref(false);
        this.bodyWidth = vue.ref(null);
        this.fixedWidth = vue.ref(null);
        this.rightFixedWidth = vue.ref(null);
        this.tableHeight = vue.ref(null);
        this.headerHeight = vue.ref(44);
        this.appendHeight = vue.ref(0);
        this.footerHeight = vue.ref(44);
        this.viewportHeight = vue.ref(null);
        this.bodyHeight = vue.ref(null);
        this.fixedBodyHeight = vue.ref(null);
        this.gutterWidth = scrollbarWidth__default['default']();
        for (const name in options) {
            if (options.hasOwnProperty(name)) {
                if (vue.isRef(this[name])) {
                    this[name].value = options[name];
                }
                else {
                    this[name] = options[name];
                }
            }
        }
        if (!this.table) {
            throw new Error('table is required for Table Layout');
        }
        if (!this.store) {
            throw new Error('store is required for Table Layout');
        }
    }
    updateScrollY() {
        const height = this.height.value;
        if (height === null)
            return false;
        const bodyWrapper = this.table.refs.bodyWrapper;
        if (this.table.vnode.el && bodyWrapper) {
            const body = bodyWrapper.querySelector('.el-table__body');
            const prevScrollY = this.scrollY.value;
            const scrollY = body.offsetHeight > this.bodyHeight.value;
            this.scrollY.value = scrollY;
            return prevScrollY !== scrollY;
        }
        return false;
    }
    setHeight(value, prop = 'height') {
        if (isServer__default['default'])
            return;
        const el = this.table.vnode.el;
        value = parseHeight(value);
        this.height.value = Number(value);
        if (!el && (value || value === 0))
            return vue.nextTick(() => this.setHeight(value, prop));
        if (typeof value === 'number') {
            el.style[prop] = value + 'px';
            this.updateElsHeight();
        }
        else if (typeof value === 'string') {
            el.style[prop] = value;
            this.updateElsHeight();
        }
    }
    setMaxHeight(value) {
        this.setHeight(value, 'max-height');
    }
    getFlattenColumns() {
        const flattenColumns = [];
        const columns = this.table.store.states.columns.value;
        columns.forEach(column => {
            if (column.isColumnGroup) {
                flattenColumns.push.apply(flattenColumns, column.columns);
            }
            else {
                flattenColumns.push(column);
            }
        });
        return flattenColumns;
    }
    updateElsHeight() {
        if (!this.table.$ready)
            return vue.nextTick(() => this.updateElsHeight());
        const { headerWrapper: headerWrapper_, appendWrapper: appendWrapper_, footerWrapper: footerWrapper_, } = this.table.refs;
        const appendWrapper = appendWrapper_;
        const headerWrapper = headerWrapper_;
        const footerWrapper = footerWrapper_;
        this.appendHeight.value = appendWrapper ? appendWrapper.offsetHeight : 0;
        if (this.showHeader && !headerWrapper)
            return;
        const headerTrElm = headerWrapper
            ? headerWrapper.querySelector('.el-table__header tr')
            : null;
        const noneHeader = this.headerDisplayNone(headerTrElm);
        const headerHeight = (this.headerHeight.value = !this.showHeader
            ? 0
            : headerWrapper.offsetHeight);
        if (this.showHeader &&
            !noneHeader &&
            headerWrapper.offsetWidth > 0 &&
            (this.table.store.states.columns.value || []).length > 0 &&
            headerHeight < 2) {
            return vue.nextTick(() => this.updateElsHeight());
        }
        const tableHeight = (this.tableHeight.value = this.table.vnode.el.clientHeight);
        const footerHeight = (this.footerHeight.value = footerWrapper
            ? footerWrapper.offsetHeight
            : 0);
        if (this.height.value !== null) {
            this.bodyHeight.value =
                tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
        }
        this.fixedBodyHeight.value = this.scrollX.value
            ? this.bodyHeight.value - this.gutterWidth
            : this.bodyHeight.value;
        this.viewportHeight.value = this.scrollX.value
            ? tableHeight - this.gutterWidth
            : tableHeight;
        this.updateScrollY();
        this.notifyObservers('scrollable');
    }
    headerDisplayNone(elm) {
        if (!elm)
            return true;
        let headerChild = elm;
        while (headerChild.tagName !== 'DIV') {
            if (getComputedStyle(headerChild).display === 'none') {
                return true;
            }
            headerChild = headerChild.parentElement;
        }
        return false;
    }
    updateColumnsWidth() {
        if (isServer__default['default'])
            return;
        const fit = this.fit;
        const bodyWidth = this.table.vnode.el.clientWidth;
        let bodyMinWidth = 0;
        const flattenColumns = this.getFlattenColumns();
        const flexColumns = flattenColumns.filter(column => typeof column.width !== 'number');
        flattenColumns.forEach(column => {
            if (typeof column.width === 'number' && column.realWidth)
                column.realWidth = null;
        });
        if (flexColumns.length > 0 && fit) {
            flattenColumns.forEach(column => {
                bodyMinWidth += column.width || column.minWidth || 80;
            });
            const scrollYWidth = this.scrollY.value ? this.gutterWidth : 0;
            if (bodyMinWidth <= bodyWidth - scrollYWidth) {
                this.scrollX.value = false;
                const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth;
                if (flexColumns.length === 1) {
                    flexColumns[0].realWidth =
                        (flexColumns[0].minWidth || 80) + totalFlexWidth;
                }
                else {
                    const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);
                    const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
                    let noneFirstWidth = 0;
                    flexColumns.forEach((column, index) => {
                        if (index === 0)
                            return;
                        const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
                        noneFirstWidth += flexWidth;
                        column.realWidth = (column.minWidth || 80) + flexWidth;
                    });
                    flexColumns[0].realWidth =
                        (flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
                }
            }
            else {
                this.scrollX.value = true;
                flexColumns.forEach(function (column) {
                    column.realWidth = column.minWidth;
                });
            }
            this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
            this.table.state.resizeState.value.width = this.bodyWidth.value;
        }
        else {
            flattenColumns.forEach(column => {
                if (!column.width && !column.minWidth) {
                    column.realWidth = 80;
                }
                else {
                    column.realWidth = column.width || column.minWidth;
                }
                bodyMinWidth += column.realWidth;
            });
            this.scrollX.value = bodyMinWidth > bodyWidth;
            this.bodyWidth.value = bodyMinWidth;
        }
        const fixedColumns = this.store.states.fixedColumns.value;
        if (fixedColumns.length > 0) {
            let fixedWidth = 0;
            fixedColumns.forEach(function (column) {
                fixedWidth += column.realWidth || column.width;
            });
            this.fixedWidth.value = fixedWidth;
        }
        const rightFixedColumns = this.store.states.rightFixedColumns.value;
        if (rightFixedColumns.length > 0) {
            let rightFixedWidth = 0;
            rightFixedColumns.forEach(function (column) {
                rightFixedWidth += column.realWidth || column.width;
            });
            this.rightFixedWidth.value = rightFixedWidth;
        }
        this.notifyObservers('columns');
    }
    addObserver(observer) {
        this.observers.push(observer);
    }
    removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
            this.observers.splice(index, 1);
        }
    }
    notifyObservers(event) {
        const observers = this.observers;
        observers.forEach(observer => {
            var _a, _b;
            switch (event) {
                case 'columns':
                    (_a = observer.state) === null || _a === void 0 ? void 0 : _a.onColumnsChange(this);
                    break;
                case 'scrollable':
                    (_b = observer.state) === null || _b === void 0 ? void 0 : _b.onScrollableChange(this);
                    break;
                default:
                    throw new Error(`Table Layout don't have event ${event}.`);
            }
        });
    }
}

var script = vue.defineComponent({
    name: 'ElTableFilterPanel',
    components: {
        ElCheckbox: ElCheckbox__default['default'],
        ElCheckboxGroup: ElCheckboxGroup__default['default'],
        ElScrollbar: ElScrollbar__default['default'],
        ElPopper: ElPopper__default['default'],
    },
    directives: { ClickOutside: directives.ClickOutside },
    props: {
        placement: {
            type: String,
            default: 'bottom-start',
        },
        store: {
            type: Object,
        },
        column: {
            type: Object,
        },
        upDataColumn: {
            type: Function,
        },
    },
    setup(props) {
        const instance = vue.getCurrentInstance();
        const parent = instance.parent;
        if (!parent.filterPanels.value[props.column.id]) {
            parent.filterPanels.value[props.column.id] = instance;
        }
        const tooltipVisible = vue.ref(false);
        const tooltip = vue.ref(null);
        const filters = vue.computed(() => {
            return props.column && props.column.filters;
        });
        const filterValue = vue.computed({
            get: () => (props.column.filteredValue || [])[0],
            set: (value) => {
                if (filteredValue.value) {
                    if (typeof value !== 'undefined' && value !== null) {
                        filteredValue.value.splice(0, 1, value);
                    }
                    else {
                        filteredValue.value.splice(0, 1);
                    }
                }
            },
        });
        const filteredValue = vue.computed({
            get() {
                if (props.column) {
                    return props.column.filteredValue || [];
                }
                return [];
            },
            set(value) {
                if (props.column) {
                    props.upDataColumn('filteredValue', value);
                }
            },
        });
        const multiple = vue.computed(() => {
            if (props.column) {
                return props.column.filterMultiple;
            }
            return true;
        });
        const isActive = filter => {
            return filter.value === filterValue.value;
        };
        const hidden = () => {
            tooltipVisible.value = false;
        };
        const showFilterPanel = (e) => {
            e.stopPropagation();
            tooltipVisible.value = !tooltipVisible.value;
        };
        const hideFilterPanel = () => {
            tooltipVisible.value = false;
        };
        const handleConfirm = () => {
            confirmFilter(filteredValue.value);
            hidden();
        };
        const handleReset = () => {
            filteredValue.value = [];
            confirmFilter(filteredValue.value);
            hidden();
        };
        const handleSelect = (_filterValue) => {
            filterValue.value = _filterValue;
            if (typeof _filterValue !== 'undefined' && _filterValue !== null) {
                confirmFilter(filteredValue.value);
            }
            else {
                confirmFilter([]);
            }
            hidden();
        };
        const confirmFilter = (filteredValue) => {
            props.store.commit('filterChange', {
                column: props.column,
                values: filteredValue,
            });
            props.store.updateAllSelected();
        };
        vue.watch(tooltipVisible, value => {
            if (props.column) {
                props.upDataColumn('filterOpened', value);
            }
        }, {
            immediate: true,
        });
        const popperPaneRef = vue.computed(() => {
            var _a;
            return (_a = tooltip.value) === null || _a === void 0 ? void 0 : _a.popperRef;
        });
        return {
            tooltipVisible,
            multiple,
            filteredValue,
            filterValue,
            filters,
            handleConfirm,
            handleReset,
            handleSelect,
            isActive,
            t: locale.t,
            showFilterPanel,
            hideFilterPanel,
            popperPaneRef,
            tooltip,
        };
    },
});

const _hoisted_1 = { key: 0 };
const _hoisted_2 = { class: "el-table-filter__content" };
const _hoisted_3 = { class: "el-table-filter__bottom" };
const _hoisted_4 = {
  key: 1,
  class: "el-table-filter__list"
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_checkbox = vue.resolveComponent("el-checkbox");
  const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
  const _component_el_popper = vue.resolveComponent("el-popper");
  const _directive_click_outside = vue.resolveDirective("click-outside");

  return (vue.openBlock(), vue.createBlock(_component_el_popper, {
    ref: "tooltip",
    visible: _ctx.tooltipVisible,
    "onUpdate:visible": _cache[6] || (_cache[6] = $event => (_ctx.tooltipVisible = $event)),
    offset: 0,
    placement: _ctx.placement,
    "show-arrow": false,
    "stop-popper-mouse-event": false,
    effect: "light",
    pure: "",
    "manual-mode": "",
    "popper-class": "el-table-filter",
    "append-to-body": ""
  }, {
    default: vue.withCtx(() => [
      (_ctx.multiple)
        ? (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
            vue.createVNode("div", _hoisted_2, [
              vue.createVNode(_component_el_scrollbar, { "wrap-class": "el-table-filter__wrap" }, {
                default: vue.withCtx(() => [
                  vue.createVNode(_component_el_checkbox_group, {
                    modelValue: _ctx.filteredValue,
                    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_ctx.filteredValue = $event)),
                    class: "el-table-filter__checkbox-group"
                  }, {
                    default: vue.withCtx(() => [
                      (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
                        return (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
                          key: filter.value,
                          label: filter.value
                        }, {
                          default: vue.withCtx(() => [
                            vue.createTextVNode(vue.toDisplayString(filter.text), 1 /* TEXT */)
                          ]),
                          _: 2 /* DYNAMIC */
                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["label"]))
                      }), 128 /* KEYED_FRAGMENT */))
                    ]),
                    _: 1 /* STABLE */
                  }, 8 /* PROPS */, ["modelValue"])
                ]),
                _: 1 /* STABLE */
              })
            ]),
            vue.createVNode("div", _hoisted_3, [
              vue.createVNode("button", {
                class: { 'is-disabled': _ctx.filteredValue.length === 0 },
                disabled: _ctx.filteredValue.length === 0,
                type: "",
                onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.handleConfirm && _ctx.handleConfirm(...args)))
              }, vue.toDisplayString(_ctx.t('el.table.confirmFilter')), 11 /* TEXT, CLASS, PROPS */, ["disabled"]),
              vue.createVNode("button", {
                type: "",
                onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.handleReset && _ctx.handleReset(...args)))
              }, vue.toDisplayString(_ctx.t('el.table.resetFilter')), 1 /* TEXT */)
            ])
          ]))
        : (vue.openBlock(), vue.createBlock("ul", _hoisted_4, [
            vue.createVNode("li", {
              class: [{
            'is-active': _ctx.filterValue === undefined || _ctx.filterValue === null,
          }, "el-table-filter__list-item"],
              onClick: _cache[4] || (_cache[4] = $event => (_ctx.handleSelect(null)))
            }, vue.toDisplayString(_ctx.t('el.table.clearFilter')), 3 /* TEXT, CLASS */),
            (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
              return (vue.openBlock(), vue.createBlock("li", {
                key: filter.value,
                class: [{ 'is-active': _ctx.isActive(filter) }, "el-table-filter__list-item"],
                label: filter.value,
                onClick: $event => (_ctx.handleSelect(filter.value))
              }, vue.toDisplayString(filter.text), 11 /* TEXT, CLASS, PROPS */, ["label", "onClick"]))
            }), 128 /* KEYED_FRAGMENT */))
          ]))
    ]),
    trigger: vue.withCtx(() => [
      vue.withDirectives(vue.createVNode("span", {
        class: "el-table__column-filter-trigger el-none-outline",
        onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.showFilterPanel && _ctx.showFilterPanel(...args)))
      }, [
        vue.createVNode("i", {
          class: [
            'el-icon-arrow-down',
            _ctx.column.filterOpened ? 'el-icon-arrow-up' : '',
          ]
        }, null, 2 /* CLASS */)
      ], 512 /* NEED_PATCH */), [
        [_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef]
      ])
    ]),
    _: 1 /* STABLE */
  }, 8 /* PROPS */, ["visible", "placement"]))
}

script.render = render;
script.__file = "packages/table/src/filter-panel.vue";

function useLayoutObserver(root) {
    const instance = vue.getCurrentInstance();
    vue.onBeforeMount(() => {
        tableLayout.value.addObserver(instance);
    });
    vue.onMounted(() => {
        onColumnsChange(tableLayout.value);
        onScrollableChange(tableLayout.value);
    });
    vue.onUpdated(() => {
        onColumnsChange(tableLayout.value);
        onScrollableChange(tableLayout.value);
    });
    vue.onUnmounted(() => {
        tableLayout.value.removeObserver(instance);
    });
    const tableLayout = vue.computed(() => {
        const layout = root.layout;
        if (!layout) {
            throw new Error('Can not find table layout.');
        }
        return layout;
    });
    const onColumnsChange = (layout) => {
        var _a;
        const cols = (_a = root.vnode.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('colgroup > col');
        if (!cols.length)
            return;
        const flattenColumns = layout.getFlattenColumns();
        const columnsMap = {};
        flattenColumns.forEach(column => {
            columnsMap[column.id] = column;
        });
        for (let i = 0, j = cols.length; i < j; i++) {
            const col = cols[i];
            const name = col.getAttribute('name');
            const column = columnsMap[name];
            if (column) {
                col.setAttribute('width', column.realWidth || column.width);
            }
        }
    };
    const onScrollableChange = (layout) => {
        const cols = root.vnode.el.querySelectorAll('colgroup > col[name=gutter]');
        for (let i = 0, j = cols.length; i < j; i++) {
            const col = cols[i];
            col.setAttribute('width', layout.scrollY.value ? layout.gutterWidth : '0');
        }
        const ths = root.vnode.el.querySelectorAll('th.gutter');
        for (let i = 0, j = ths.length; i < j; i++) {
            const th = ths[i];
            th.style.width = layout.scrollY.value ? layout.gutterWidth + 'px' : '0';
            th.style.display = layout.scrollY.value ? '' : 'none';
        }
    };
    return {
        tableLayout: tableLayout.value,
        onColumnsChange,
        onScrollableChange,
    };
}

function useEvent(props, emit) {
    const instance = vue.getCurrentInstance();
    const parent = instance.parent;
    const handleFilterClick = (event) => {
        event.stopPropagation();
        return;
    };
    const handleHeaderClick = (event, column) => {
        if (!column.filters && column.sortable) {
            handleSortClick(event, column, false);
        }
        else if (column.filterable && !column.sortable) {
            handleFilterClick(event);
        }
        parent.emit('header-click', column, event);
    };
    const handleHeaderContextMenu = (event, column) => {
        parent.emit('header-contextmenu', column, event);
    };
    const draggingColumn = vue.ref(null);
    const dragging = vue.ref(false);
    const dragState = vue.ref({});
    const handleMouseDown = (event, column) => {
        if (isServer__default['default'])
            return;
        if (column.children && column.children.length > 0)
            return;
        if (draggingColumn.value && props.border) {
            dragging.value = true;
            const table = parent;
            emit('set-drag-visible', true);
            const tableEl = table.vnode.el;
            const tableLeft = tableEl.getBoundingClientRect().left;
            const columnEl = instance.vnode.el.querySelector(`th.${column.id}`);
            const columnRect = columnEl.getBoundingClientRect();
            const minLeft = columnRect.left - tableLeft + 30;
            dom.addClass(columnEl, 'noclick');
            dragState.value = {
                startMouseLeft: event.clientX,
                startLeft: columnRect.right - tableLeft,
                startColumnLeft: columnRect.left - tableLeft,
                tableLeft,
            };
            const resizeProxy = table.refs.resizeProxy;
            resizeProxy.style.left = dragState.value.startLeft + 'px';
            document.onselectstart = function () {
                return false;
            };
            document.ondragstart = function () {
                return false;
            };
            const handleMouseMove = (event) => {
                const deltaLeft = event.clientX - dragState.value.startMouseLeft;
                const proxyLeft = dragState.value.startLeft + deltaLeft;
                resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
            };
            const handleMouseUp = () => {
                if (dragging.value) {
                    const { startColumnLeft, startLeft } = dragState.value;
                    const finalLeft = parseInt(resizeProxy.style.left, 10);
                    const columnWidth = finalLeft - startColumnLeft;
                    column.width = column.realWidth = columnWidth;
                    table.emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);
                    props.store.scheduleLayout(false, true);
                    document.body.style.cursor = '';
                    dragging.value = false;
                    draggingColumn.value = null;
                    dragState.value = {};
                    emit('set-drag-visible', false);
                }
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
                document.onselectstart = null;
                document.ondragstart = null;
                setTimeout(function () {
                    dom.removeClass(columnEl, 'noclick');
                }, 0);
            };
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
        }
    };
    const handleMouseMove = (event, column) => {
        if (column.children && column.children.length > 0)
            return;
        let target = event.target;
        while (target && target.tagName !== 'TH') {
            target = target.parentNode;
        }
        if (!column || !column.resizable)
            return;
        if (!dragging.value && props.border) {
            const rect = target.getBoundingClientRect();
            const bodyStyle = document.body.style;
            if (rect.width > 12 && rect.right - event.pageX < 8) {
                bodyStyle.cursor = 'col-resize';
                if (dom.hasClass(target, 'is-sortable')) {
                    target.style.cursor = 'col-resize';
                }
                draggingColumn.value = column;
            }
            else if (!dragging.value) {
                bodyStyle.cursor = '';
                if (dom.hasClass(target, 'is-sortable')) {
                    target.style.cursor = 'pointer';
                }
                draggingColumn.value = null;
            }
        }
    };
    const handleMouseOut = () => {
        if (isServer__default['default'])
            return;
        document.body.style.cursor = '';
    };
    const toggleOrder = ({ order, sortOrders }) => {
        if (order === '')
            return sortOrders[0];
        const index = sortOrders.indexOf(order || null);
        return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
    };
    const handleSortClick = (event, column, givenOrder) => {
        event.stopPropagation();
        const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
        let target = event.target;
        while (target && target.tagName !== 'TH') {
            target = target.parentNode;
        }
        if (target && target.tagName === 'TH') {
            if (dom.hasClass(target, 'noclick')) {
                dom.removeClass(target, 'noclick');
                return;
            }
        }
        if (!column.sortable)
            return;
        const states = props.store.states;
        let sortProp = states.sortProp.value;
        let sortOrder;
        const sortingColumn = states.sortingColumn.value;
        if (sortingColumn !== column ||
            (sortingColumn === column && sortingColumn.order === null)) {
            if (sortingColumn) {
                sortingColumn.order = null;
            }
            states.sortingColumn.value = column;
            sortProp = column.property;
        }
        if (!order) {
            sortOrder = column.order = null;
        }
        else {
            sortOrder = column.order = order;
        }
        states.sortProp.value = sortProp;
        states.sortOrder.value = sortOrder;
        parent.store.commit('changeSortCondition');
    };
    return {
        handleHeaderClick,
        handleHeaderContextMenu,
        handleMouseDown,
        handleMouseMove,
        handleMouseOut,
        handleSortClick,
        handleFilterClick,
    };
}

function useStyle(props) {
    const instance = vue.getCurrentInstance();
    const parent = instance.parent;
    const storeData = parent.store.states;
    const isCellHidden = (index, columns) => {
        let start = 0;
        for (let i = 0; i < index; i++) {
            start += columns[i].colSpan;
        }
        const after = start + columns[index].colSpan - 1;
        if (props.fixed === 'left') {
            return after >= storeData.fixedLeafColumnsLength.value;
        }
        else if (props.fixed === 'right') {
            return (start <
                storeData.columns.value.length -
                    storeData.rightFixedLeafColumnsLength.value);
        }
        else {
            return (after < storeData.fixedLeafColumnsLength.value ||
                start >=
                    storeData.columns.value.length -
                        storeData.rightFixedLeafColumnsLength.value);
        }
    };
    const getHeaderRowStyle = (rowIndex) => {
        const headerRowStyle = parent.props.headerRowStyle;
        if (typeof headerRowStyle === 'function') {
            return headerRowStyle.call(null, { rowIndex });
        }
        return headerRowStyle;
    };
    const getHeaderRowClass = (rowIndex) => {
        const classes = [];
        const headerRowClassName = parent.props.headerRowClassName;
        if (typeof headerRowClassName === 'string') {
            classes.push(headerRowClassName);
        }
        else if (typeof headerRowClassName === 'function') {
            classes.push(headerRowClassName.call(null, { rowIndex }));
        }
        return classes.join(' ');
    };
    const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
        const headerCellStyle = parent.props.headerCellStyle;
        if (typeof headerCellStyle === 'function') {
            return headerCellStyle.call(null, {
                rowIndex,
                columnIndex,
                row,
                column,
            });
        }
        return headerCellStyle;
    };
    const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
        const classes = [
            column.id,
            column.order,
            column.headerAlign,
            column.className,
            column.labelClassName,
        ];
        if (rowIndex === 0 &&
            isCellHidden(columnIndex, row)) {
            classes.push('is-hidden');
        }
        if (!column.children) {
            classes.push('is-leaf');
        }
        if (column.sortable) {
            classes.push('is-sortable');
        }
        const headerCellClassName = parent.props.headerCellClassName;
        if (typeof headerCellClassName === 'string') {
            classes.push(headerCellClassName);
        }
        else if (typeof headerCellClassName === 'function') {
            classes.push(headerCellClassName.call(null, {
                rowIndex,
                columnIndex,
                row,
                column,
            }));
        }
        return classes.join(' ');
    };
    return {
        getHeaderRowStyle,
        getHeaderRowClass,
        getHeaderCellStyle,
        getHeaderCellClass,
    };
}

const getAllColumns = (columns) => {
    const result = [];
    columns.forEach(column => {
        if (column.children) {
            result.push(column);
            result.push.apply(result, getAllColumns(column.children));
        }
        else {
            result.push(column);
        }
    });
    return result;
};
const convertToRows = (originColumns) => {
    let maxLevel = 1;
    const traverse = (column, parent) => {
        if (parent) {
            column.level = parent.level + 1;
            if (maxLevel < column.level) {
                maxLevel = column.level;
            }
        }
        if (column.children) {
            let colSpan = 0;
            column.children.forEach(subColumn => {
                traverse(subColumn, column);
                colSpan += subColumn.colSpan;
            });
            column.colSpan = colSpan;
        }
        else {
            column.colSpan = 1;
        }
    };
    originColumns.forEach(column => {
        column.level = 1;
        traverse(column, undefined);
    });
    const rows = [];
    for (let i = 0; i < maxLevel; i++) {
        rows.push([]);
    }
    const allColumns = getAllColumns(originColumns);
    allColumns.forEach(column => {
        if (!column.children) {
            column.rowSpan = maxLevel - column.level + 1;
        }
        else {
            column.rowSpan = 1;
        }
        rows[column.level - 1].push(column);
    });
    return rows;
};
function useUtils(props) {
    const instance = vue.getCurrentInstance();
    const parent = instance.parent;
    const columnRows = vue.computed(() => {
        return convertToRows(props.store.states.originColumns.value);
    });
    const isGroup = vue.computed(() => {
        const result = columnRows.value.length > 1;
        if (result)
            parent.state.isGroup.value = true;
        return result;
    });
    const toggleAllSelection = (event) => {
        event.stopPropagation();
        parent.store.commit('toggleAllSelection');
    };
    return {
        isGroup,
        toggleAllSelection,
        columnRows,
    };
}

function hGutter() {
    return vue.h('col', {
        name: 'gutter',
    });
}
function hColgroup(columns, hasGutter = false) {
    return vue.h('colgroup', {}, [
        ...columns.map(column => vue.h('col', {
            name: column.id,
            key: column.id,
        })),
        hasGutter && hGutter(),
    ]);
}

var TableHeader = vue.defineComponent({
    name: 'ElTableHeader',
    components: {
        ElCheckbox: ElCheckbox__default['default'],
    },
    props: {
        fixed: {
            type: String,
            default: '',
        },
        store: {
            required: true,
            type: Object,
        },
        border: Boolean,
        defaultSort: {
            type: Object,
            default() {
                return {
                    prop: '',
                    order: '',
                };
            },
        },
    },
    setup(props, { emit }) {
        const instance = vue.getCurrentInstance();
        const parent = instance.parent;
        const storeData = parent.store.states;
        const filterPanels = vue.ref({});
        const { tableLayout, onColumnsChange, onScrollableChange, } = useLayoutObserver(parent);
        const hasGutter = vue.computed(() => {
            return !props.fixed && tableLayout.gutterWidth;
        });
        vue.onMounted(() => {
            vue.nextTick(() => {
                const { prop, order } = props.defaultSort;
                const init = true;
                parent.store.commit('sort', { prop, order, init });
            });
        });
        const { handleHeaderClick, handleHeaderContextMenu, handleMouseDown, handleMouseMove, handleMouseOut, handleSortClick, handleFilterClick, } = useEvent(props, emit);
        const { getHeaderRowStyle, getHeaderRowClass, getHeaderCellStyle, getHeaderCellClass, } = useStyle(props);
        const { isGroup, toggleAllSelection, columnRows } = useUtils(props);
        instance.state = {
            onColumnsChange,
            onScrollableChange,
        };
        instance.filterPanels = filterPanels;
        return {
            columns: storeData.columns,
            filterPanels,
            hasGutter,
            onColumnsChange,
            onScrollableChange,
            columnRows,
            getHeaderRowClass,
            getHeaderRowStyle,
            getHeaderCellClass,
            getHeaderCellStyle,
            handleHeaderClick,
            handleHeaderContextMenu,
            handleMouseDown,
            handleMouseMove,
            handleMouseOut,
            handleSortClick,
            handleFilterClick,
            isGroup,
            toggleAllSelection,
        };
    },
    render() {
        return vue.h('table', {
            border: '0',
            cellpadding: '0',
            cellspacing: '0',
            class: 'el-table__header',
        }, [
            hColgroup(this.columns, this.hasGutter),
            vue.h('thead', {
                class: { 'is-group': this.isGroup, 'has-gutter': this.hasGutter },
            }, this.columnRows.map((subColumns, rowIndex) => vue.h('tr', {
                class: this.getHeaderRowClass(rowIndex),
                key: rowIndex,
                style: this.getHeaderRowStyle(rowIndex),
            }, subColumns.map((column, cellIndex) => vue.h('th', {
                class: this.getHeaderCellClass(rowIndex, cellIndex, subColumns, column),
                colspan: column.colSpan,
                key: `${column.id}-thead`,
                rowSpan: column.rowSpan,
                style: this.getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
                onClick: $event => this.handleHeaderClick($event, column),
                onContextmenu: $event => this.handleHeaderContextMenu($event, column),
                onMousedown: $event => this.handleMouseDown($event, column),
                onMouseMove: $event => this.handleMouseMove($event, column),
                onMouseout: this.handleMouseOut,
            }, [
                vue.h('div', {
                    class: [
                        'cell',
                        column.filteredValue &&
                            column.filteredValue.length > 0
                            ? 'highlight'
                            : '',
                        column.labelClassName,
                    ],
                }, [
                    column.renderHeader
                        ? column.renderHeader({
                            column,
                            $index: cellIndex,
                            store: this.store,
                            _self: this.$parent,
                        })
                        : column.label,
                    column.sortable &&
                        vue.h('span', {
                            onClick: $event => this.handleSortClick($event, column),
                            class: 'caret-wrapper',
                        }, [
                            vue.h('i', {
                                onClick: $event => this.handleSortClick($event, column, 'ascending'),
                                class: 'sort-caret ascending',
                            }),
                            vue.h('i', {
                                onClick: $event => this.handleSortClick($event, column, 'descending'),
                                class: 'sort-caret descending',
                            }),
                        ]),
                    column.filterable &&
                        vue.h(script, {
                            store: this.$parent.store,
                            placement: column.filterPlacement || 'bottom-start',
                            column: column,
                            upDataColumn: (key, value) => {
                                column[key] = value;
                            },
                        }),
                ]),
            ]))))),
        ]);
    },
});

function useEvents(props) {
    const instance = vue.getCurrentInstance();
    const parent = instance.parent;
    const tooltipVisible = vue.ref(false);
    const tooltipContent = vue.ref('');
    const tooltipTrigger = vue.ref(vue.h('div'));
    const handleEvent = (event, row, name) => {
        const table = parent;
        const cell = getCell(event);
        let column;
        if (cell) {
            column = getColumnByCell({
                columns: props.store.states.columns.value,
            }, cell);
            if (column) {
                table.emit(`cell-${name}`, row, column, cell, event);
            }
        }
        table.emit(`row-${name}`, row, column, event);
    };
    const handleDoubleClick = (event, row) => {
        handleEvent(event, row, 'dblclick');
    };
    const handleClick = (event, row) => {
        props.store.commit('setCurrentRow', row);
        handleEvent(event, row, 'click');
    };
    const handleContextMenu = (event, row) => {
        handleEvent(event, row, 'contextmenu');
    };
    const handleMouseEnter = debounce__default['default'](function (index) {
        props.store.commit('setHoverRow', index);
    }, 30);
    const handleMouseLeave = debounce__default['default'](function () {
        props.store.commit('setHoverRow', null);
    }, 30);
    const handleCellMouseEnter = (event, row) => {
        const table = parent;
        const cell = getCell(event);
        if (cell) {
            const column = getColumnByCell({
                columns: props.store.states.columns.value,
            }, cell);
            const hoverState = (table.hoverState = { cell, column, row });
            table.emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event);
        }
        const cellChild = event.target.querySelector('.cell');
        if (!(dom.hasClass(cellChild, 'el-tooltip') && cellChild.childNodes.length)) {
            return;
        }
        const range = document.createRange();
        range.setStart(cellChild, 0);
        range.setEnd(cellChild, cellChild.childNodes.length);
        const rangeWidth = range.getBoundingClientRect().width;
        const padding = (parseInt(dom.getStyle(cellChild, 'paddingLeft'), 10) || 0) +
            (parseInt(dom.getStyle(cellChild, 'paddingRight'), 10) || 0);
        if (rangeWidth + padding > cellChild.offsetWidth ||
            cellChild.scrollWidth > cellChild.offsetWidth) {
            createTablePopper(cell, cell.innerText || cell.textContent, {
                placement: 'top',
                strategy: 'fixed',
            }, row.tooltipEffect);
        }
    };
    const handleCellMouseLeave = event => {
        tooltipVisible.value = false;
        const cell = getCell(event);
        if (!cell)
            return;
        const oldHoverState = parent.hoverState;
        parent.emit('cell-mouse-leave', oldHoverState === null || oldHoverState === void 0 ? void 0 : oldHoverState.row, oldHoverState === null || oldHoverState === void 0 ? void 0 : oldHoverState.column, oldHoverState === null || oldHoverState === void 0 ? void 0 : oldHoverState.cell, event);
    };
    return {
        handleDoubleClick,
        handleClick,
        handleContextMenu,
        handleMouseEnter,
        handleMouseLeave,
        handleCellMouseEnter,
        handleCellMouseLeave,
        tooltipVisible,
        tooltipContent,
        tooltipTrigger,
    };
}

function useStyles(props) {
    const instance = vue.getCurrentInstance();
    const parent = instance.parent;
    const isColumnHidden = index => {
        if (props.fixed === 'left') {
            return index >= props.store.states.fixedLeafColumnsLength.value;
        }
        else if (props.fixed === 'right') {
            return (index <
                props.store.states.columns.value.length -
                    props.store.states.rightFixedLeafColumnsLength.value);
        }
        else {
            return (index < props.store.states.fixedLeafColumnsLength.value ||
                index >=
                    props.store.states.columns.value.length -
                        props.store.states.rightFixedLeafColumnsLength.value);
        }
    };
    const getRowStyle = (row, rowIndex) => {
        const rowStyle = parent.props.rowStyle;
        if (typeof rowStyle === 'function') {
            return rowStyle.call(null, {
                row,
                rowIndex,
            });
        }
        return rowStyle || null;
    };
    const getRowClass = (row, rowIndex) => {
        const classes = ['el-table__row'];
        if (parent.props.highlightCurrentRow &&
            row === props.store.states.currentRow.value) {
            classes.push('current-row');
        }
        if (props.stripe && rowIndex % 2 === 1) {
            classes.push('el-table__row--striped');
        }
        const rowClassName = parent.props.rowClassName;
        if (typeof rowClassName === 'string') {
            classes.push(rowClassName);
        }
        else if (typeof rowClassName === 'function') {
            classes.push(rowClassName.call(null, {
                row,
                rowIndex,
            }));
        }
        if (props.store.states.expandRows.value.indexOf(row) > -1) {
            classes.push('expanded');
        }
        return classes;
    };
    const getCellStyle = (rowIndex, columnIndex, row, column) => {
        const cellStyle = parent.props.cellStyle;
        if (typeof cellStyle === 'function') {
            return cellStyle.call(null, {
                rowIndex,
                columnIndex,
                row,
                column,
            });
        }
        return cellStyle;
    };
    const getCellClass = (rowIndex, columnIndex, row, column) => {
        const classes = [column.id, column.align, column.className];
        if (isColumnHidden(columnIndex)) {
            classes.push('is-hidden');
        }
        const cellClassName = parent.props.cellClassName;
        if (typeof cellClassName === 'string') {
            classes.push(cellClassName);
        }
        else if (typeof cellClassName === 'function') {
            classes.push(cellClassName.call(null, {
                rowIndex,
                columnIndex,
                row,
                column,
            }));
        }
        return classes.join(' ');
    };
    const getSpan = (row, column, rowIndex, columnIndex) => {
        let rowspan = 1;
        let colspan = 1;
        const fn = parent.props.spanMethod;
        if (typeof fn === 'function') {
            const result = fn({
                row,
                column,
                rowIndex,
                columnIndex,
            });
            if (Array.isArray(result)) {
                rowspan = result[0];
                colspan = result[1];
            }
            else if (typeof result === 'object') {
                rowspan = result.rowspan;
                colspan = result.colspan;
            }
        }
        return { rowspan, colspan };
    };
    const getColspanRealWidth = (columns, colspan, index) => {
        if (colspan < 1) {
            return columns[index].realWidth;
        }
        const widthArr = columns
            .map(({ realWidth, width }) => realWidth || width)
            .slice(index, index + colspan);
        return widthArr.reduce((acc, width) => acc + width, -1);
    };
    return {
        getRowStyle,
        getRowClass,
        getCellStyle,
        getCellClass,
        getSpan,
        getColspanRealWidth,
        isColumnHidden,
    };
}

function useRender(props) {
    const instance = vue.getCurrentInstance();
    const parent = instance.parent;
    const { handleDoubleClick, handleClick, handleContextMenu, handleMouseEnter, handleMouseLeave, handleCellMouseEnter, handleCellMouseLeave, tooltipVisible, tooltipContent, tooltipTrigger, } = useEvents(props);
    const { getRowStyle, getRowClass, getCellStyle, getCellClass, getSpan, getColspanRealWidth, } = useStyles(props);
    const firstDefaultColumnIndex = vue.computed(() => {
        return util.arrayFindIndex(props.store.states.columns.value, ({ type }) => type === 'default');
    });
    const getKeyOfRow = (row, index) => {
        const rowKey = parent.props.rowKey;
        if (rowKey) {
            return getRowIdentity(row, rowKey);
        }
        return index;
    };
    const rowRender = (row, $index, treeRowData) => {
        const { tooltipEffect, store } = props;
        const { indent, columns } = store.states;
        const rowClasses = getRowClass(row, $index);
        let display = true;
        if (treeRowData) {
            rowClasses.push('el-table__row--level-' + treeRowData.level);
            display = treeRowData.display;
        }
        const displayStyle = display
            ? null
            : {
                display: 'none',
            };
        return vue.h('tr', {
            style: [displayStyle, getRowStyle(row, $index)],
            class: rowClasses,
            key: getKeyOfRow(row, $index),
            onDblclick: $event => handleDoubleClick($event, row),
            onClick: $event => handleClick($event, row),
            onContextmenu: $event => handleContextMenu($event, row),
            onMouseenter: () => handleMouseEnter($index),
            onMouseleave: handleMouseLeave,
        }, columns.value.map((column, cellIndex) => {
            const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
            if (!rowspan || !colspan) {
                return null;
            }
            const columnData = Object.assign({}, column);
            columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
            const data = {
                store: props.store,
                _self: props.context || parent,
                column: columnData,
                row,
                $index,
            };
            if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
                data.treeNode = {
                    indent: treeRowData.level * indent.value,
                    level: treeRowData.level,
                };
                if (typeof treeRowData.expanded === 'boolean') {
                    data.treeNode.expanded = treeRowData.expanded;
                    if ('loading' in treeRowData) {
                        data.treeNode.loading = treeRowData.loading;
                    }
                    if ('noLazyChildren' in treeRowData) {
                        data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
                    }
                }
            }
            return vue.h('td', {
                style: getCellStyle($index, cellIndex, row, column),
                class: getCellClass($index, cellIndex, row, column),
                rowspan,
                colspan,
                onMouseenter: $event => handleCellMouseEnter($event, Object.assign(Object.assign({}, row), { tooltipEffect })),
                onMouseleave: handleCellMouseLeave,
            }, [column.renderCell(data)]);
        }));
    };
    const wrappedRowRender = (row, $index) => {
        const store = props.store;
        const { isRowExpanded, assertRowKey } = store;
        const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey, } = store.states;
        const hasExpandColumn = store.states.columns.value.some(({ type }) => type === 'expand');
        if (hasExpandColumn && isRowExpanded(row)) {
            const renderExpanded = parent.renderExpanded;
            const tr = rowRender(row, $index, undefined);
            if (!renderExpanded) {
                console.error('[Element Error]renderExpanded is required.');
                return tr;
            }
            return [
                [
                    tr,
                    vue.h('tr', {
                        key: 'expanded-row__' + tr.key,
                    }, [
                        vue.h('td', {
                            colspan: store.states.columns.value.length,
                            class: 'el-table__expanded-cell',
                        }, [renderExpanded({ row, $index, store })]),
                    ]),
                ],
            ];
        }
        else if (Object.keys(treeData.value).length) {
            assertRowKey();
            const key = getRowIdentity(row, rowKey.value);
            let cur = treeData.value[key];
            let treeRowData = null;
            if (cur) {
                treeRowData = {
                    expanded: cur.expanded,
                    level: cur.level,
                    display: true,
                };
                if (typeof cur.lazy === 'boolean') {
                    if (typeof cur.loaded === 'boolean' && cur.loaded) {
                        treeRowData.noLazyChildren = !(cur.children && cur.children.length);
                    }
                    treeRowData.loading = cur.loading;
                }
            }
            const tmp = [rowRender(row, $index, treeRowData)];
            if (cur) {
                let i = 0;
                const traverse = (children, parent) => {
                    if (!(children && children.length && parent))
                        return;
                    children.forEach(node => {
                        const innerTreeRowData = {
                            display: parent.display && parent.expanded,
                            level: parent.level + 1,
                            expanded: false,
                            noLazyChildren: false,
                            loading: false,
                        };
                        const childKey = getRowIdentity(node, rowKey.value);
                        if (childKey === undefined || childKey === null) {
                            throw new Error('for nested data item, row-key is required.');
                        }
                        cur = Object.assign({}, treeData.value[childKey]);
                        if (cur) {
                            innerTreeRowData.expanded = cur.expanded;
                            cur.level = cur.level || innerTreeRowData.level;
                            cur.display = !!(cur.expanded && innerTreeRowData.display);
                            if (typeof cur.lazy === 'boolean') {
                                if (typeof cur.loaded === 'boolean' && cur.loaded) {
                                    innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
                                }
                                innerTreeRowData.loading = cur.loading;
                            }
                        }
                        i++;
                        tmp.push(rowRender(node, $index + i, innerTreeRowData));
                        if (cur) {
                            const nodes = lazyTreeNodeMap.value[childKey] ||
                                node[childrenColumnName.value];
                            traverse(nodes, cur);
                        }
                    });
                };
                cur.display = true;
                const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
                traverse(nodes, cur);
            }
            return tmp;
        }
        else {
            return rowRender(row, $index, undefined);
        }
    };
    return {
        wrappedRowRender,
        tooltipVisible,
        tooltipContent,
        tooltipTrigger,
    };
}

var TableBody = vue.defineComponent({
    name: 'ElTableBody',
    props: {
        store: {
            required: true,
            type: Object,
        },
        stripe: Boolean,
        tooltipEffect: String,
        context: {
            default: () => ({}),
            type: Object,
        },
        rowClassName: [String, Function],
        rowStyle: [Object, Function],
        fixed: {
            type: String,
            default: '',
        },
        highlight: Boolean,
    },
    setup(props) {
        const instance = vue.getCurrentInstance();
        const parent = instance.parent;
        const { wrappedRowRender, tooltipVisible, tooltipContent, tooltipTrigger, } = useRender(props);
        const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
        vue.watch(props.store.states.hoverRow, (newVal, oldVal) => {
            if (!props.store.states.isComplex.value || isServer__default['default'])
                return;
            let raf = window.requestAnimationFrame;
            if (!raf) {
                raf = fn => window.setTimeout(fn, 16);
            }
            raf(() => {
                const rows = instance.vnode.el.querySelectorAll('.el-table__row');
                const oldRow = rows[oldVal];
                const newRow = rows[newVal];
                if (oldRow) {
                    dom.removeClass(oldRow, 'hover-row');
                }
                if (newRow) {
                    dom.addClass(newRow, 'hover-row');
                }
            });
        });
        vue.onUnmounted(() => {
            removePopper === null || removePopper === void 0 ? void 0 : removePopper();
        });
        return {
            onColumnsChange,
            onScrollableChange,
            wrappedRowRender,
            tooltipVisible,
            tooltipContent,
            tooltipTrigger,
        };
    },
    render() {
        const data = this.store.states.data.value || [];
        return vue.h('table', {
            class: 'el-table__body',
            cellspacing: '0',
            cellpadding: '0',
            border: '0',
        }, [
            hColgroup(this.store.states.columns.value),
            vue.h('tbody', {}, [
                data.reduce((acc, row) => {
                    return acc.concat(this.wrappedRowRender(row, acc.length));
                }, []),
            ]),
        ]);
    },
});

function useMapState() {
    const instance = vue.getCurrentInstance();
    const table = instance.parent;
    const store = table.store;
    const leftFixedLeafCount = vue.computed(() => {
        return store.states.fixedLeafColumnsLength.value;
    });
    const rightFixedLeafCount = vue.computed(() => {
        return store.states.rightFixedColumns.value.length;
    });
    const columnsCount = vue.computed(() => {
        return store.states.columns.value.length;
    });
    const leftFixedCount = vue.computed(() => {
        return store.states.fixedColumns.value.length;
    });
    const rightFixedCount = vue.computed(() => {
        return store.states.rightFixedColumns.value.length;
    });
    return {
        leftFixedLeafCount,
        rightFixedLeafCount,
        columnsCount,
        leftFixedCount,
        rightFixedCount,
        columns: store.states.columns,
    };
}

function useStyle$1(props) {
    const instance = vue.getCurrentInstance();
    const table = instance.parent;
    const store = table.store;
    const { leftFixedLeafCount, rightFixedLeafCount, columnsCount, leftFixedCount, rightFixedCount, columns, } = useMapState();
    const hasGutter = vue.computed(() => {
        return !props.fixed && table.layout.gutterWidth;
    });
    const isCellHidden = (index, columns, column) => {
        if (props.fixed || props.fixed === 'left') {
            return index >= leftFixedLeafCount.value;
        }
        else if (props.fixed === 'right') {
            let before = 0;
            for (let i = 0; i < index; i++) {
                before += columns[i].colSpan;
            }
            return before < columnsCount.value - rightFixedLeafCount.value;
        }
        else if (!props.fixed && column.fixed) {
            return true;
        }
        else {
            return (index < leftFixedCount.value ||
                index >= columnsCount.value - rightFixedCount.value);
        }
    };
    const getRowClasses = (column, cellIndex) => {
        const classes = [column.id, column.align, column.labelClassName];
        if (column.className) {
            classes.push(column.className);
        }
        if (isCellHidden(cellIndex, store.states.columns.value, column)) {
            classes.push('is-hidden');
        }
        if (!column.children) {
            classes.push('is-leaf');
        }
        return classes;
    };
    return {
        hasGutter,
        getRowClasses,
        columns,
    };
}

var TableFooter = vue.defineComponent({
    name: 'ElTableFooter',
    props: {
        fixed: {
            type: String,
            default: '',
        },
        store: {
            required: true,
            type: Object,
        },
        summaryMethod: Function,
        sumText: String,
        border: Boolean,
        defaultSort: {
            type: Object,
            default() {
                return {
                    prop: '',
                    order: '',
                };
            },
        },
    },
    setup(props) {
        const { hasGutter, getRowClasses, columns, } = useStyle$1(props);
        return {
            getRowClasses,
            hasGutter,
            columns,
        };
    },
    render() {
        let sums = [];
        if (this.summaryMethod) {
            sums = this.summaryMethod({ columns: this.columns, data: this.store.states.data.value });
        }
        else {
            this.columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = this.sumText;
                    return;
                }
                const values = this.store.states.data.value.map(item => Number(item[column.property]));
                const precisions = [];
                let notNumber = true;
                values.forEach(value => {
                    if (!isNaN(value)) {
                        notNumber = false;
                        const decimal = ('' + value).split('.')[1];
                        precisions.push(decimal ? decimal.length : 0);
                    }
                });
                const precision = Math.max.apply(null, precisions);
                if (!notNumber) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
                        }
                        else {
                            return prev;
                        }
                    }, 0);
                }
                else {
                    sums[index] = '';
                }
            });
        }
        return vue.h('table', {
            class: 'el-table__footer',
            cellspacing: '0',
            cellpadding: '0',
            border: '0',
        }, [
            hColgroup(this.columns, this.hasGutter),
            vue.h('tbody', {
                class: [{ 'has-gutter': this.hasGutter }],
            }, [
                vue.h('tr', {}, [
                    ...this.columns.map((column, cellIndex) => vue.h('td', {
                        key: cellIndex,
                        colspan: column.colSpan,
                        rowspan: column.rowSpan,
                        class: this.getRowClasses(column, cellIndex),
                    }, [
                        vue.h('div', {
                            class: ['cell', column.labelClassName],
                        }, [
                            sums[cellIndex],
                        ]),
                    ])),
                    this.hasGutter && hGutter(),
                ]),
            ]),
        ]);
    },
});

function useUtils$1(store) {
    const setCurrentRow = (row) => {
        store.commit('setCurrentRow', row);
    };
    const toggleRowSelection = (row, selected) => {
        store.toggleRowSelection(row, selected, false);
        store.updateAllSelected();
    };
    const clearSelection = () => {
        store.clearSelection();
    };
    const clearFilter = (columnKeys) => {
        store.clearFilter(columnKeys);
    };
    const toggleAllSelection = () => {
        store.commit('toggleAllSelection');
    };
    const toggleRowExpansion = (row, expanded) => {
        store.toggleRowExpansionAdapter(row, expanded);
    };
    const clearSort = () => {
        store.clearSort();
    };
    const sort = (prop, order) => {
        store.commit('sort', { prop, order });
    };
    return {
        setCurrentRow,
        toggleRowSelection,
        clearSelection,
        clearFilter,
        toggleAllSelection,
        toggleRowExpansion,
        clearSort,
        sort,
    };
}

function useStyle$2(props, layout, store, table) {
    const $ElEMENT = util.useGlobalConfig();
    const isHidden = vue.ref(false);
    const renderExpanded = vue.ref(null);
    const resizeProxyVisible = vue.ref(false);
    const setDragVisible = (visible) => {
        resizeProxyVisible.value = visible;
    };
    const resizeState = vue.ref({
        width: null,
        height: null,
    });
    const isGroup = vue.ref(false);
    vue.watchEffect(() => {
        layout.setHeight(props.height);
    });
    vue.watchEffect(() => {
        layout.setMaxHeight(props.maxHeight);
    });
    vue.watchEffect(() => {
        if (!store.states.rowKey.value)
            return;
        store.setCurrentRowKey(props.currentRowKey);
    });
    vue.watch(() => props.data, () => {
        table.store.commit('setData', props.data);
    }, {
        immediate: true,
    });
    vue.watchEffect(() => {
        if (props.expandRowKeys) {
            store.setExpandRowKeysAdapter(props.expandRowKeys);
        }
    });
    const handleMouseLeave = () => {
        table.store.commit('setHoverRow', null);
        if (table.hoverState)
            table.hoverState = null;
    };
    const handleHeaderFooterMousewheel = (event, data) => {
        const { pixelX, pixelY } = data;
        if (Math.abs(pixelX) >= Math.abs(pixelY)) {
            table.refs.bodyWrapper.scrollLeft += data.pixelX / 5;
        }
    };
    const shouldUpdateHeight = vue.computed(() => {
        return (props.height ||
            props.maxHeight ||
            store.states.fixedColumns.value.length > 0 ||
            store.states.rightFixedColumns.value.length > 0);
    });
    const doLayout = () => {
        if (shouldUpdateHeight.value) {
            layout.updateElsHeight();
        }
        layout.updateColumnsWidth();
        syncPostion();
    };
    vue.onMounted(() => {
        setScrollClass('is-scrolling-left');
        bindEvents();
        store.updateColumns();
        doLayout();
        resizeState.value = {
            width: table.vnode.el.offsetWidth,
            height: table.vnode.el.offsetHeight,
        };
        store.states.columns.value.forEach((column) => {
            if (column.filteredValue && column.filteredValue.length) {
                table.store.commit('filterChange', {
                    column,
                    values: column.filteredValue,
                    silent: true,
                });
            }
        });
        table.$ready = true;
    });
    const setScrollClassByEl = (el, className) => {
        if (!el)
            return;
        const classList = Array.from(el.classList).filter(item => !item.startsWith('is-scrolling-'));
        classList.push(layout.scrollX.value ? className : 'is-scrolling-none');
        el.className = classList.join(' ');
    };
    const setScrollClass = (className) => {
        const { bodyWrapper } = table.refs;
        setScrollClassByEl(bodyWrapper, className);
    };
    const syncPostion = throttle__default['default'](function () {
        if (!table.refs.bodyWrapper)
            return;
        const { scrollLeft, scrollTop, offsetWidth, scrollWidth, } = table.refs.bodyWrapper;
        const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper, } = table.refs;
        if (headerWrapper)
            headerWrapper.scrollLeft = scrollLeft;
        if (footerWrapper)
            footerWrapper.scrollLeft = scrollLeft;
        if (fixedBodyWrapper)
            fixedBodyWrapper.scrollTop = scrollTop;
        if (rightFixedBodyWrapper)
            rightFixedBodyWrapper.scrollTop = scrollTop;
        const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
        if (scrollLeft >= maxScrollLeftPosition) {
            setScrollClass('is-scrolling-right');
        }
        else if (scrollLeft === 0) {
            setScrollClass('is-scrolling-left');
        }
        else {
            setScrollClass('is-scrolling-middle');
        }
    }, 10);
    const bindEvents = () => {
        table.refs.bodyWrapper.addEventListener('scroll', syncPostion, {
            passive: true,
        });
        if (props.fit) {
            resizeEvent.addResizeListener(table.vnode.el, resizeListener);
        }
    };
    vue.onUnmounted(() => {
        unbindEvents();
    });
    const unbindEvents = () => {
        var _a;
        (_a = table.refs.bodyWrapper) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', syncPostion, true);
        if (props.fit) {
            resizeEvent.removeResizeListener(table.vnode.el, resizeListener);
        }
    };
    const resizeListener = () => {
        if (!table.$ready)
            return;
        let shouldUpdateLayout = false;
        const el = table.vnode.el;
        const { width: oldWidth, height: oldHeight } = resizeState.value;
        const width = el.offsetWidth;
        if (oldWidth !== width) {
            shouldUpdateLayout = true;
        }
        const height = el.offsetHeight;
        if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
            shouldUpdateLayout = true;
        }
        if (shouldUpdateLayout) {
            resizeState.value = {
                width,
                height,
            };
            doLayout();
        }
    };
    const tableSize = vue.computed(() => {
        return props.size || $ElEMENT.size;
    });
    const bodyWidth = vue.computed(() => {
        const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
        return bodyWidth_.value
            ? bodyWidth_.value - (scrollY.value ? gutterWidth : 0) + 'px'
            : '';
    });
    const bodyHeight = vue.computed(() => {
        const headerHeight = layout.headerHeight.value || 0;
        const bodyHeight = layout.bodyHeight.value;
        const footerHeight = layout.footerHeight.value || 0;
        if (props.height) {
            return {
                height: bodyHeight ? bodyHeight + 'px' : '',
            };
        }
        else if (props.maxHeight) {
            const maxHeight = parseHeight(props.maxHeight);
            if (typeof maxHeight === 'number') {
                return {
                    'max-height': maxHeight -
                        footerHeight -
                        (props.showHeader ? headerHeight : 0) +
                        'px',
                };
            }
        }
        return {};
    });
    const emptyBlockStyle = vue.computed(() => {
        if (props.data && props.data.length)
            return null;
        let height = '100%';
        if (layout.appendHeight.value) {
            height = `calc(100% - ${layout.appendHeight.value}px)`;
        }
        return {
            width: bodyWidth.value,
            height,
        };
    });
    const handleFixedMousewheel = (event, data) => {
        const bodyWrapper = table.refs.bodyWrapper;
        if (Math.abs(data.spinY) > 0) {
            const currentScrollTop = bodyWrapper.scrollTop;
            if (data.pixelY < 0 && currentScrollTop !== 0) {
                event.preventDefault();
            }
            if (data.pixelY > 0 &&
                bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) {
                event.preventDefault();
            }
            bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
        }
        else {
            bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
        }
    };
    const fixedHeight = vue.computed(() => {
        if (props.maxHeight) {
            if (props.showSummary) {
                return {
                    bottom: 0,
                };
            }
            return {
                bottom: layout.scrollX.value && props.data.length
                    ? layout.gutterWidth + 'px'
                    : '',
            };
        }
        else {
            if (props.showSummary) {
                return {
                    height: layout.tableHeight.value
                        ? layout.tableHeight.value + 'px'
                        : '',
                };
            }
            return {
                height: layout.viewportHeight.value
                    ? layout.viewportHeight.value + 'px'
                    : '',
            };
        }
    });
    const fixedBodyHeight = vue.computed(() => {
        if (props.height) {
            return {
                height: layout.fixedBodyHeight.value
                    ? layout.fixedBodyHeight.value + 'px'
                    : '',
            };
        }
        else if (props.maxHeight) {
            let maxHeight = parseHeight(props.maxHeight);
            if (typeof maxHeight === 'number') {
                maxHeight = layout.scrollX.value
                    ? maxHeight - layout.gutterWidth
                    : maxHeight;
                if (props.showHeader) {
                    maxHeight -= layout.headerHeight.value;
                }
                maxHeight -= layout.footerHeight.value;
                return {
                    'max-height': maxHeight + 'px',
                };
            }
        }
        return {};
    });
    return {
        isHidden,
        renderExpanded,
        setDragVisible,
        isGroup,
        handleMouseLeave,
        handleHeaderFooterMousewheel,
        tableSize,
        bodyHeight,
        emptyBlockStyle,
        handleFixedMousewheel,
        fixedHeight,
        fixedBodyHeight,
        resizeProxyVisible,
        bodyWidth,
        resizeState,
        doLayout,
    };
}

let tableIdSeed = 1;
var script$1 = vue.defineComponent({
    name: 'ElTable',
    directives: {
        Mousewheel: directives.Mousewheel,
    },
    components: {
        TableHeader,
        TableBody,
        TableFooter,
    },
    props: {
        data: {
            type: Array,
            default: function () {
                return [];
            },
        },
        size: String,
        width: [String, Number],
        height: [String, Number],
        maxHeight: [String, Number],
        fit: {
            type: Boolean,
            default: true,
        },
        stripe: Boolean,
        border: Boolean,
        rowKey: [String, Function],
        showHeader: {
            type: Boolean,
            default: true,
        },
        showSummary: Boolean,
        sumText: String,
        summaryMethod: Function,
        rowClassName: [String, Function],
        rowStyle: [Object, Function],
        cellClassName: [String, Function],
        cellStyle: [Object, Function],
        headerRowClassName: [String, Function],
        headerRowStyle: [Object, Function],
        headerCellClassName: [String, Function],
        headerCellStyle: [Object, Function],
        highlightCurrentRow: Boolean,
        currentRowKey: [String, Number],
        emptyText: String,
        expandRowKeys: Array,
        defaultExpandAll: Boolean,
        defaultSort: Object,
        tooltipEffect: String,
        spanMethod: Function,
        selectOnIndeterminate: {
            type: Boolean,
            default: true,
        },
        indent: {
            type: Number,
            default: 16,
        },
        treeProps: {
            type: Object,
            default() {
                return {
                    hasChildren: 'hasChildren',
                    children: 'children',
                };
            },
        },
        lazy: Boolean,
        load: Function,
    },
    emits: [
        'select',
        'select-all',
        'selection-change',
        'cell-mouse-enter',
        'cell-mouse-leave',
        'cell-click',
        'cell-dblclick',
        'row-click',
        'row-contextmenu',
        'row-dblclick',
        'header-click',
        'header-contextmenu',
        'sort-change',
        'filter-change',
        'current-change',
        'header-dragend',
        'expand-change',
    ],
    setup(props) {
        let table = vue.getCurrentInstance();
        const store = createStore(table, {
            rowKey: props.rowKey,
            defaultExpandAll: props.defaultExpandAll,
            selectOnIndeterminate: props.selectOnIndeterminate,
            indent: props.indent,
            lazy: props.lazy,
            lazyColumnIdentifier: props.treeProps.hasChildren || 'hasChildren',
            childrenColumnName: props.treeProps.children || 'children',
            data: props.data,
        });
        table.store = store;
        const layout = new TableLayout({
            store: table.store,
            table,
            fit: props.fit,
            showHeader: props.showHeader,
        });
        table.layout = layout;
        const shouldUpdateHeight = vue.computed(() => {
            return (props.height ||
                props.maxHeight ||
                store.states.fixedColumns.value.length > 0 ||
                store.states.rightFixedColumns.value.length > 0);
        });
        const { setCurrentRow, toggleRowSelection, clearSelection, clearFilter, toggleAllSelection, toggleRowExpansion, clearSort, sort, } = useUtils$1(store);
        const { isHidden, renderExpanded, setDragVisible, isGroup, handleMouseLeave, handleHeaderFooterMousewheel, tableSize, bodyHeight, emptyBlockStyle, handleFixedMousewheel, fixedHeight, fixedBodyHeight, resizeProxyVisible, bodyWidth, resizeState, doLayout, } = useStyle$2(props, layout, store, table);
        const debouncedUpdateLayout = debounce__default['default'](() => doLayout(), 50);
        const tableId = 'el-table_' + tableIdSeed++;
        table.tableId = tableId;
        table.state = {
            isGroup,
            resizeState,
            doLayout,
            debouncedUpdateLayout,
        };
        return {
            layout,
            store,
            handleHeaderFooterMousewheel,
            handleMouseLeave,
            tableId,
            tableSize,
            isHidden,
            renderExpanded,
            resizeProxyVisible,
            resizeState,
            isGroup,
            bodyWidth,
            bodyHeight,
            emptyBlockStyle,
            debouncedUpdateLayout,
            handleFixedMousewheel,
            fixedHeight,
            fixedBodyHeight,
            setCurrentRow,
            toggleRowSelection,
            clearSelection,
            clearFilter,
            toggleAllSelection,
            toggleRowExpansion,
            clearSort,
            doLayout,
            sort,
            t: locale.t,
            setDragVisible,
            context: table,
        };
    },
});

const _hoisted_1$1 = {
  ref: "hiddenColumns",
  class: "hidden-columns"
};
const _hoisted_2$1 = {
  key: 0,
  ref: "headerWrapper",
  class: "el-table__header-wrapper"
};
const _hoisted_3$1 = { class: "el-table__empty-text" };
const _hoisted_4$1 = {
  key: 1,
  ref: "appendWrapper",
  class: "el-table__append-wrapper"
};
const _hoisted_5 = {
  key: 1,
  ref: "footerWrapper",
  class: "el-table__footer-wrapper"
};
const _hoisted_6 = {
  key: 0,
  ref: "fixedHeaderWrapper",
  class: "el-table__fixed-header-wrapper"
};
const _hoisted_7 = {
  key: 1,
  ref: "fixedFooterWrapper",
  class: "el-table__fixed-footer-wrapper"
};
const _hoisted_8 = {
  key: 0,
  ref: "rightFixedHeaderWrapper",
  class: "el-table__fixed-header-wrapper"
};
const _hoisted_9 = {
  key: 1,
  ref: "rightFixedFooterWrapper",
  class: "el-table__fixed-footer-wrapper"
};
const _hoisted_10 = {
  ref: "resizeProxy",
  class: "el-table__column-resize-proxy"
};

function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_table_header = vue.resolveComponent("table-header");
  const _component_table_body = vue.resolveComponent("table-body");
  const _component_table_footer = vue.resolveComponent("table-footer");
  const _directive_mousewheel = vue.resolveDirective("mousewheel");

  return (vue.openBlock(), vue.createBlock("div", {
    class: [[
      {
        'el-table--fit': _ctx.fit,
        'el-table--striped': _ctx.stripe,
        'el-table--border': _ctx.border || _ctx.isGroup,
        'el-table--hidden': _ctx.isHidden,
        'el-table--group': _ctx.isGroup,
        'el-table--fluid-height': _ctx.maxHeight,
        'el-table--scrollable-x': _ctx.layout.scrollX.value,
        'el-table--scrollable-y': _ctx.layout.scrollY.value,
        'el-table--enable-row-hover': !_ctx.store.states.isComplex.value,
        'el-table--enable-row-transition':
          (_ctx.store.states.data.value || []).length !== 0 &&
          (_ctx.store.states.data.value || []).length < 100,
      },
      _ctx.tableSize ? `el-table--${_ctx.tableSize}` : '',
    ], "el-table"],
    onMouseleave: _cache[1] || (_cache[1] = $event => (_ctx.handleMouseLeave()))
  }, [
    vue.createVNode("div", _hoisted_1$1, [
      vue.renderSlot(_ctx.$slots, "default")
    ], 512 /* NEED_PATCH */),
    (_ctx.showHeader)
      ? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_2$1, [
          vue.createVNode(_component_table_header, {
            ref: "tableHeader",
            border: _ctx.border,
            "default-sort": _ctx.defaultSort,
            store: _ctx.store,
            style: {
          width: _ctx.layout.bodyWidth.value ? _ctx.layout.bodyWidth.value + 'px' : '',
        },
            onSetDragVisible: _ctx.setDragVisible
          }, null, 8 /* PROPS */, ["border", "default-sort", "store", "style", "onSetDragVisible"])
        ], 512 /* NEED_PATCH */)), [
          [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
        ])
      : vue.createCommentVNode("v-if", true),
    vue.createVNode("div", {
      ref: "bodyWrapper",
      style: [_ctx.bodyHeight],
      class: "el-table__body-wrapper"
    }, [
      vue.createVNode(_component_table_body, {
        context: _ctx.context,
        highlight: _ctx.highlightCurrentRow,
        "row-class-name": _ctx.rowClassName,
        "tooltip-effect": _ctx.tooltipEffect,
        "row-style": _ctx.rowStyle,
        store: _ctx.store,
        stripe: _ctx.stripe,
        style: {
          width: _ctx.bodyWidth,
        }
      }, null, 8 /* PROPS */, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
      (!_ctx.data || _ctx.data.length === 0)
        ? (vue.openBlock(), vue.createBlock("div", {
            key: 0,
            ref: "emptyBlock",
            style: _ctx.emptyBlockStyle,
            class: "el-table__empty-block"
          }, [
            vue.createVNode("span", _hoisted_3$1, [
              vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                vue.createTextVNode(vue.toDisplayString(_ctx.emptyText || _ctx.t('el.table.emptyText')), 1 /* TEXT */)
              ])
            ])
          ], 4 /* STYLE */))
        : vue.createCommentVNode("v-if", true),
      (_ctx.$slots.append)
        ? (vue.openBlock(), vue.createBlock("div", _hoisted_4$1, [
            vue.renderSlot(_ctx.$slots, "append")
          ], 512 /* NEED_PATCH */))
        : vue.createCommentVNode("v-if", true)
    ], 4 /* STYLE */),
    (_ctx.showSummary)
      ? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_5, [
          vue.createVNode(_component_table_footer, {
            border: _ctx.border,
            "default-sort": _ctx.defaultSort,
            store: _ctx.store,
            style: {
          width: _ctx.layout.bodyWidth.value ? _ctx.layout.bodyWidth.value + 'px' : '',
        },
            "sum-text": _ctx.sumText || _ctx.t('el.table.sumText'),
            "summary-method": _ctx.summaryMethod
          }, null, 8 /* PROPS */, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
        ], 512 /* NEED_PATCH */)), [
          [vue.vShow, _ctx.data && _ctx.data.length > 0],
          [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
        ])
      : vue.createCommentVNode("v-if", true),
    (_ctx.store.states.fixedColumns.value.length > 0)
      ? vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
          key: 2,
          ref: "fixedWrapper",
          style: [
        {
          width: _ctx.layout.fixedWidth.value ? _ctx.layout.fixedWidth.value + 'px' : '',
        },
        _ctx.fixedHeight,
      ],
          class: "el-table__fixed"
        }, [
          (_ctx.showHeader)
            ? (vue.openBlock(), vue.createBlock("div", _hoisted_6, [
                vue.createVNode(_component_table_header, {
                  ref: "fixedTableHeader",
                  border: _ctx.border,
                  store: _ctx.store,
                  style: {
            width: _ctx.bodyWidth,
          },
                  fixed: "left",
                  onSetDragVisible: _ctx.setDragVisible
                }, null, 8 /* PROPS */, ["border", "store", "style", "onSetDragVisible"])
              ], 512 /* NEED_PATCH */))
            : vue.createCommentVNode("v-if", true),
          vue.createVNode("div", {
            ref: "fixedBodyWrapper",
            style: [
          {
            top: _ctx.layout.headerHeight.value + 'px',
          },
          _ctx.fixedBodyHeight,
        ],
            class: "el-table__fixed-body-wrapper"
          }, [
            vue.createVNode(_component_table_body, {
              highlight: _ctx.highlightCurrentRow,
              "row-class-name": _ctx.rowClassName,
              "tooltip-effect": _ctx.tooltipEffect,
              "row-style": _ctx.rowStyle,
              store: _ctx.store,
              stripe: _ctx.stripe,
              style: {
            width: _ctx.bodyWidth,
          },
              fixed: "left"
            }, null, 8 /* PROPS */, ["highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
            (_ctx.$slots.append)
              ? (vue.openBlock(), vue.createBlock("div", {
                  key: 0,
                  style: { height: _ctx.layout.appendHeight.value + 'px' },
                  class: "el-table__append-gutter"
                }, null, 4 /* STYLE */))
              : vue.createCommentVNode("v-if", true)
          ], 4 /* STYLE */),
          (_ctx.showSummary)
            ? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_7, [
                vue.createVNode(_component_table_footer, {
                  border: _ctx.border,
                  store: _ctx.store,
                  style: {
            width: _ctx.bodyWidth,
          },
                  "sum-text": _ctx.sumText || _ctx.t('el.table.sumText'),
                  "summary-method": _ctx.summaryMethod,
                  fixed: "left"
                }, null, 8 /* PROPS */, ["border", "store", "style", "sum-text", "summary-method"])
              ], 512 /* NEED_PATCH */)), [
                [vue.vShow, _ctx.data && _ctx.data.length > 0]
              ])
            : vue.createCommentVNode("v-if", true)
        ], 4 /* STYLE */)), [
          [_directive_mousewheel, _ctx.handleFixedMousewheel]
        ])
      : vue.createCommentVNode("v-if", true),
    (_ctx.store.states.rightFixedColumns.value.length > 0)
      ? vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
          key: 3,
          ref: "rightFixedWrapper",
          style: [
        {
          width: _ctx.layout.rightFixedWidth.value
            ? _ctx.layout.rightFixedWidth.value + 'px'
            : '',
          right: _ctx.layout.scrollY.value
            ? (_ctx.border ? _ctx.layout.gutterWidth : _ctx.layout.gutterWidth || 0) + 'px'
            : '',
        },
        _ctx.fixedHeight,
      ],
          class: "el-table__fixed-right"
        }, [
          (_ctx.showHeader)
            ? (vue.openBlock(), vue.createBlock("div", _hoisted_8, [
                vue.createVNode(_component_table_header, {
                  ref: "rightFixedTableHeader",
                  border: _ctx.border,
                  store: _ctx.store,
                  style: {
            width: _ctx.bodyWidth,
          },
                  fixed: "right",
                  onSetDragVisible: _ctx.setDragVisible
                }, null, 8 /* PROPS */, ["border", "store", "style", "onSetDragVisible"])
              ], 512 /* NEED_PATCH */))
            : vue.createCommentVNode("v-if", true),
          vue.createVNode("div", {
            ref: "rightFixedBodyWrapper",
            style: [{ top: _ctx.layout.headerHeight.value + 'px' }, _ctx.fixedBodyHeight],
            class: "el-table__fixed-body-wrapper"
          }, [
            vue.createVNode(_component_table_body, {
              highlight: _ctx.highlightCurrentRow,
              "row-class-name": _ctx.rowClassName,
              "tooltip-effect": _ctx.tooltipEffect,
              "row-style": _ctx.rowStyle,
              store: _ctx.store,
              stripe: _ctx.stripe,
              style: {
            width: _ctx.bodyWidth,
          },
              fixed: "right"
            }, null, 8 /* PROPS */, ["highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
            (_ctx.$slots.append)
              ? (vue.openBlock(), vue.createBlock("div", {
                  key: 0,
                  style: { height: _ctx.layout.appendHeight.value + 'px' },
                  class: "el-table__append-gutter"
                }, null, 4 /* STYLE */))
              : vue.createCommentVNode("v-if", true)
          ], 4 /* STYLE */),
          (_ctx.showSummary)
            ? vue.withDirectives((vue.openBlock(), vue.createBlock("div", _hoisted_9, [
                vue.createVNode(_component_table_footer, {
                  border: _ctx.border,
                  store: _ctx.store,
                  style: {
            width: _ctx.bodyWidth,
          },
                  "sum-text": _ctx.sumText || _ctx.t('el.table.sumText'),
                  "summary-method": _ctx.summaryMethod,
                  fixed: "right"
                }, null, 8 /* PROPS */, ["border", "store", "style", "sum-text", "summary-method"])
              ], 512 /* NEED_PATCH */)), [
                [vue.vShow, _ctx.data && _ctx.data.length > 0]
              ])
            : vue.createCommentVNode("v-if", true)
        ], 4 /* STYLE */)), [
          [_directive_mousewheel, _ctx.handleFixedMousewheel]
        ])
      : vue.createCommentVNode("v-if", true),
    (_ctx.store.states.rightFixedColumns.value.length > 0)
      ? (vue.openBlock(), vue.createBlock("div", {
          key: 4,
          ref: "rightFixedPatch",
          style: {
        width: _ctx.layout.scrollY.value ? _ctx.layout.gutterWidth + 'px' : '0',
        height: _ctx.layout.headerHeight.value + 'px',
      },
          class: "el-table__fixed-right-patch"
        }, null, 4 /* STYLE */))
      : vue.createCommentVNode("v-if", true),
    vue.withDirectives(vue.createVNode("div", _hoisted_10, null, 512 /* NEED_PATCH */), [
      [vue.vShow, _ctx.resizeProxyVisible]
    ])
  ], 34 /* CLASS, HYDRATE_EVENTS */))
}

script$1.render = render$1;
script$1.__file = "packages/table/src/table.vue";

script$1.install = (app) => {
    app.component(script$1.name, script$1);
};
const _Table = script$1;

exports.default = _Table;
